July 2017
Intermediate to advanced
454 pages
10h 1m
English
So far, we have implemented examples using various methods for Angular animations.
When we design/decide motion and the transitions of elements, we need to iterate through various styles for smooth transitions.
Using keyframes we can define iterations of different styles while transitioning. keyframes essentially are a sequence of styles defined for an element.
To understand this better, let's take a look at the following code snippet:
transition('frameTest1 => frameTest2', [ animate(300, keyframes([ style({opacity: 1, transform: 'rotate(180deg)', offset: 0.3}), style({opacity: 1, transform: 'rotate(-90deg)', offset: 0.7}), style({opacity: 0, transform: 'rotate(-180deg)', offset: 1.0}) ]))
Let's analyze ...
Read now
Unlock full access