Angular2 animation for watch-timing

Question

When time changes, eg. second/min/hours/day , I want to put an animation in a particular div block. Maybe I'm not able to figure out how to go ahead.

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

when second changes, number should come from top and go to bottom kind of animation is needed.

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

In your template, you'll need to bind your animation trigger reference to a class variable that changes over time - in your case, the seconds variable is perfect choice. This will trigger a state change in your animation every second. So instead of

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

use

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

Additionally, as you don't care about the current state (the actual second) of your trigger, you can use a wildcard animation definition, which will apply the same animation every second to your template element:

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

The above block translates to: whenever the time trigger changes its value, slide in the content (from top to center) of the selected template element.

You'll also need to slightly adjust your markup, so only the numbers will animate, and not the whole enclosing div - use a nested div for that:

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

This is already quite close to what you'd like to achieve, i.e. the seconds will animate in from the top to the center of the div, see this plunker.

From here, you can implement the slideout / slidein various ways, I gave it a shot using keyframes and setting up two intervals - one triggers the start of the animation and the second will update the timer values (i.e. you original count function). See the full implementation here.

Answer 2

Thanks to @Andras Szepeshzi

Different Animations:

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