用于观看计时的 Angular2 动画答案

【问题标题】：Angular2 animation for watch-timing用于观看计时的 Angular2 动画
【发布时间】：2016-12-30 20:41:12
【问题描述】：

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

演示：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);
  }
}

【问题讨论】：

标签： angular angular2-animation

【解决方案1】：

在您的模板中，您需要将动画触发器引用绑定到随时间变化的类变量 - 在您的情况下，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")])
   ])
  ]

上面的块转换为：每当时间触发器改变它的值时，滑动所选模板元素的内容（从顶部到中心）。

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

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

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

从这里，您可以通过各种方式实现滑出/滑动，我使用关键帧进行了一次拍摄并设置了两个间隔 - 一个触发动画的开始，第二个将更新计时器值（即您原来的计数功能）。查看完整实现here。

【讨论】：

【解决方案2】：

感谢@Andras Szepeshzi

不同的动画：

https://plnkr.co/edit/rV0XR8Lt8xaRrsYO4toB?p=preview

https://plnkr.co/edit/3OQwuQ8pxtERjCqD3x06?p=preview

trigger('time', [
      transition("* => *", 
      animate(1100, keyframes([
        style({transform: 'scale(0)', offset: 0}),
        style({transform: 'scale(1)',  offset: 0.20}),
        style({transform: 'scale(5)',  offset: 0.50}),
        style({transform: 'scale(1)',  offset: 0.80}),
        style({transform: 'scale(0)',     offset: 1.0})
      ]))
      )
   ])

【讨论】：