00-mastery-angular-anim-pulse-190308.md

Little Experimentation to Animate

• ANimate heartbeat on click

https://material.io/tools/icons/?icon=favorite_border&style=baseline

mastery-angular-anim-pulse-190308.css

.box {
   width: 39px;
   border: 0px solid black;
   display: block;
   line-height: 1px;
   text-align: center;
   font-size: 1px;
   color: black;
   
 }
 

mastery-angular-anim-pulse-190308.html

<p>
  xanim-heartbeat works!
</p>
<nav>
  <button (click)="toggle()">Trigger a Pulse</button>
</nav>
<table>
  <tr>
    <td>
      <div class="box">

        <i [@slideStatus]="status" class="material-icons">{{ status == 'active' ? 'favorite' : 'favorite' }}</i>
      </div>
    </td>
    <td>86</td>
  </tr>
</table>


<!--@urir https://material.io/tools/icons/?icon=favorite_border&style=baseline-->
<!-- 
<i class="material-icons">
  favorite
</i>

<i class="material-icons">
  favorite_border
</i> -->

mastery-angular-anim-pulse-190308.ts

import { Component, OnInit } from '@angular/core';

//@a Importing 

import { trigger, transition, state, animate, style, keyframes } from '@angular/animations';
//#################################

@Component({
  selector: 'app-xanim-heartbeat',
  templateUrl: './xanim-heartbeat.component.html',
  styleUrls: ['./xanim-heartbeat.component.scss'],
 
  animations: [
    trigger('slideStatus', [
      state('inactive', style({ color: 'red' })),
      state('active', style({ color: 'green' })),

      transition('* => active', [
        animate('1s', keyframes([
          style({ color: 'red', offset: 0}),
          style({ color: 'orange', offset: 0.8}),
          style({ color: 'green', offset: 1.0})
        ])),
      ]),
      transition('* => inactive', [
        animate('1s', keyframes([
          style({ color: 'green', offset: 0}),
          style({ color: 'orange', offset: 0.2}),
          style({ color: 'red', offset: 1.0})
        ]))
      
      ]),
    ])
  ]
})
export class XanimHeartbeatComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  
  status: 'active' | 'inactive' = 'inactive';

  toggle() {
    if (this.status === 'active') {
      this.status = 'inactive';
    } else {
      this.status = 'active';
    }
  }

}