Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.box {
width: 39px;
border: 0px solid black;
display: block;
line-height: 1px;
text-align: center;
font-size: 1px;
color: black;
}
<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> -->
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';
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.