Question

当时间变化时，例如。秒/分钟/小时/天，我想在特定的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

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

2 个答案: