用于手表计时的 Angular2 动画

Question

当时间改变时，例如。 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);
  }
}

Answer 1

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

Answer 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})
      ]))
      )
   ])

用于手表计时的 Angular2 动画

Angular2 animation for watch-timing

angular

angular2-animation