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);

进一步搜索我发现angular 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！

Angular 2简单动画

1 个答案: