Angular 2简单的动画

Question

我目前正在试图做一个简单的加载器动画，基本上增加了基于给定百分比的元素。

现在我看到Angular 2有一个动画模块，并且有一点点工作，这基本上只适用于静态动画。

我已经得到了正在运行一个简单的间隔

var interval = setInterval(function(){ 
     this.count++; 
     this.loading(); 

     this.circleSize = window.innerWidth/100 * this.count; 

     if(this.count >= 100) { 
      clearInterval(interval); 
     } 

    }.bind(this), 25); 

谷歌搜索加载器组件远一点，我发现2角可变支持CSS： [style.width]="circleSize"然而，这似乎并没有获得与间隔更新。

现在，我可以像GSAP这样的图书馆来实现这一目标，但是你们如何才能做到这一点？

Answer 1

在您的组件脚本，您可以使用运行区间：

constructor: function() { 
    this.barwidth = 10; 
    setInterval(this.updateCounter.bind(this), 1000); 
    }, 
    updateCounter: function(){ 
    this.barwidth+=10; 
    } 

在模板你可以改变线条的宽度：

`<h2>{{ barwidth }} </h2><div class="bar" [style.width]="barwidth">dd</div>` 

如果你使用你的CSS的过渡，你会看到了吧有生的宽度：

.bar { 
    transition: width 0.5s; 
    background-color:green; 
    overflow:hidden; 
} 

对于简单的动画，我会建议只是坚持CSS！