Angular2 анимация для часов

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, смотрите этот плункер.

Отсюда вы можете реализовать слайд / слайд по-разному, я сделал снимок, используя ключевые кадры и установив два интервала - один запускает запуск анимации, а второй обновляет значения таймера (т. Е. Исходную функцию подсчета). Смотрите полную реализацию здесь.

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