Угловая анимация 2 с данными асинхронизации

У меня есть следующий компонент, который просто получит набор данных навыков, содержащих заголовок и процент от моей базы данных.Угловая анимация 2 с данными асинхронизации

Моя цель состоит в том, чтобы значение начальной ширины для каждого div было 0%, и как только HTTP-запрос вернется и верная информация будет восстановлена, установите правильный процент для каждого навыка с анимацией, которая идет слева направо (div будут иметь фоновый цвет, поэтому вы должны увидеть его ширину, например: 0% ---> 95%).

Мне интересно, какой был бы наилучший подход для достижения этой цели в правильной обработке углов 2. Я знаю, что есть свойство анимации, которое вы можете использовать на декораторе компонентов, но я не уверен, как заставить его работать с результатами async.

Самое главное в этом вопросе - как обрабатывать данные который входит через асинхронный канал таким образом, что я могу показать анимацию для процентного бампа. Форма 0, что бы это ни было. Как сейчас, я сразу вижу конечный результат, однако анимация никогда не выполняется (и анимация - это то, что я на самом деле ищу, а не только вывод окончательного результата бара).

Я уверен, что есть несколько разных способов заставить это работать, просто смущенный относительно того, что было бы лучшим.

Вот мой компонент:

import { Component, OnInit } from '@angular/core' 
import { SkillsService } from './skills.service' 

@Component({ 
    selector: 'skills', 
    template: ` 
    <section class="skills"> 
     <div *ngFor="let skill of skillsService.skills$ | async"> 
     <div class="skills__bar" [style.width]="skill.percentage + '%'"> 
      <h3 class="skills__title">{{skill.title}}</h3> 
     </div> 
     </div> 
    </section> 
    `, 
}) 
export class SkillsComponent implements OnInit { 

    constructor(private skillsService: SkillsService) {} 

    ngOnInit() { 
    this.skillsService.fetchSkills() 
    } 
}

Заранее спасибо, все!

источник

2016-12-27 deathandtaxes

Вы можете использовать переход CSS следующим образом:

//Demo purposes only. 
 
$("#get-skills-btn").on("click", function() { 
 
    var randomValue = Math.random(); 
 
    $(".skills__percentage").css("transform", "scaleX(" + randomValue + ")"); 
 
});

.skills__bar { 
 
    background-color: silver; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.skills__percentage { 
 
    background-color: green; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform: scaleX(0); 
 
    transform-origin: left; 
 
    transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 
 
} 
 
.skills__title { 
 
    position: relative; 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="skills"> 
 
    <div> 
 
    <div class="skills__bar"> 
 
     <div class="skills__percentage"></div> 
 
     <h3 class="skills__title">{{skill.title}}</h3> 
 
    </div> 
 
    </div> 
 
</section> 
 

 

 
<button id="get-skills-btn"> 
 
    Fetch Data 
 
</button>

Для углового использования что-то вроде этого:

[style.transform]="scaleX(skill.percentage/100)"

источник

2016-12-27 22:22:19 Ricky

Эй, Рики! Большое спасибо за то, что нашли время ответить. Хотя это действительно рациональный способ решения процентного бара с помощью CSS, и я мог бы использовать этот подход для самого стиля, он не решает самую насущную проблему, которая должна обрабатывать данные асинхронного ввода. Асинхронная трубка обрабатывает ответ (который очень маленький и, следовательно, быстрый) таким образом, что я сразу вижу зеленую часть без анимации. Так что я в значительной степени в том же месте, видя желаемый конечный результат, просто не анимацию, чтобы попасть туда ... – deathandtaxes

с угловой 4.2+, мы можем сделать это используя @angular/animations.

<div [@listParent]="len" class="list"> 
    <div *ngFor="let item of itemsAsync | async" [style.width]="item.val" class="item"> 
    {{item.name}} 
    </div> 
</div>

В компоненте декоратора, listParent анимация определяется как:

animations: [ 
    trigger('listParent', [ 
    transition('* => *', [ 
     query(':enter', style({ width: 0 })), 
     query(':enter', animate('1.6s', style({ width: '*'}))) 
    ]) 
    ])

listParent анимация будет срабатывать всякий раз, когда компонент свойство len изменений.

В this plunker, нажмите кнопку Get one или Get multiple кнопка.

источник

2017-08-08 22:17:34 bob

Угловая анимация 2 с данными асинхронизации

ответ

Смежные вопросы