用于 watch 计时的 Angular2 动画

Question

当时间改变时，例如。 second/min/hours/day ，我想将动画放在特定的 div block 中。也许我无法弄清楚如何继续。

演示:https://plnkr.co/edit/jvffeaWFCF6eazdIt3OT?p=preview

当秒数变化时，数字应该从上到下需要一种动画。

app.component.ts

import {Component,OnInit} from '@angular/core'
import {TitleComponent} './title.component';
import {
  Component,
  Input,
  trigger,
  state,
  style,
  animate,
  transition,
  group
} from '@angular/core';

@Component({
  selector: 'my-app',
  template:` 
     <div class="col-xs-3 time">{{days}}
     </div>
      <div class="col-xs-3 time">{{hours}}
     </div>
      <div class="col-xs-3 time">{{minutes}}
     </div>
      <div [@time]  class="col-xs-3 time">{{seconds}}
     </div>


  `,
 animations: [
    trigger('time', [
      transition(':enter', animate('100ms ease-in')),
      transition(':leave', animate('100ms ease-out')),
   ])
  ]
  styles:[`
    .time{
      height:100px;
      background:black;
      color:white;
      line-height:100px;
      border:1px solid;
      text-align:center;
    }
  `],


})
export class App implements OnInit {

  constructor(){
    setInterval(()=>{

          this.count()

    },1000)
  }

  count(){
      var date1 = new Date('2016-12-31 24:00');
      var date2 = new Date();

      var diffInSeconds = Math.abs(date1 - date2) / 1000;
      this.days = Math.floor(diffInSeconds / 60 / 60 / 24);
      this.hours = Math.floor(diffInSeconds / 60 / 60 % 24);
      this.minutes = Math.floor(diffInSeconds / 60 % 60);
      this.seconds = Math.floor(diffInSeconds % 60);
      this.milliseconds = Math.round((diffInSeconds - Math.floor(diffInSeconds)) * 1000);

      this.hours=('0' + this.hours).slice(-2)
      this.minutes=('0' + this.minutes).slice(-2);
      this.seconds=('0' + this.seconds).slice(-2);
  }
}

Answer 1

在您的模板中，您需要将动画触发器引用绑定(bind)到随时间变化的类变量 - 在您的情况下，seconds 变量是完美的选择。这将每秒触发动画的状态变化。所以不是

<div [@time]  class="col-xs-3 time">{{seconds}}

使用

<div [@time]="seconds" class="col-xs-3 time">{{seconds}}

此外，由于您不关心触发器的当前状态(实际秒数)，您可以使用通配符动画定义，它会每秒对模板元素应用相同的动画:

animations: [
    trigger('time', [
      transition("* => *", [style({transform: "translatey(-100%)"}), animate("200ms")])
   ])
  ]

上面的 block 转换为:每当时间触发器更改其值时，滑动所选模板元素的内容(从顶部到中心)。

您还需要稍微调整您的标记，因此只有数字会动画，而不是整个封闭的 div - 为此使用嵌套的 div:

<div class="col-xs-3 time">
  <div [@time]="seconds">{{seconds}}</div>
</div>

这已经非常接近您想要实现的目标，即秒数将从 div 的顶部到中心设置动画，请参阅 plunker .

从这里开始，您可以通过多种方式实现滑出/滑动，我使用关键帧试了一下并设置了两个间隔 - 一个触发动画的开始，第二个将更新计时器值(即您的原始计数函数).查看完整实现 here .