Ionic5动画API用法

https://ionicframework.com/blog/introducing-ionic-animations/

Ionic5的动画API用法：

const animation = createAnimation()
  .addElement(document.querySelector('.square'))
  .duration(1000)
  .direction('alternate')
  .iterations(Infinity)
  .keyframes([
    { offset: 0, transform: 'scale(1)', opacity: '1' },
    { offset: 1, transform: 'scale(1.5)', opacity: '0.5'
 }
  ]);

animation.play();

可以使用组合动画：

const animationA = createAnimation()
  .addElement(document.querySelector('.square-a'))
  .fromTo('transform', 'scale(1)', 'scale(1.5)');

const animationB = createAnimation()
  .addElement(document.querySelector('.square-b'))
  .fromTo('transform', 'scale(1)', 'scale(0.5)');

const parentAnimation = createAnimation()
  .duration(1000)
  .addAnimation([animationA, animationB]);

parentAnimation.play();

也可以用使用管道进行串联动画：

const animationA = createAnimation()
  .addElement(document.querySelector('.square-a'))
  .duration(1000)
  .fromTo('transform', 'scale(1)', 'scale(1.5)');

const animationB = createAnimation()
  .addElement(document.querySelector('.square-b'))
  .duration(2000)
  .fromTo('transform', 'scale(1)', 'scale(0.5)');

await animationA.play();
await animationB.play();

除了play方法，还有stop等方法，
可以控制时间，以及播放次数，
而且官方官网也提供了很好的性能测试报告，值得关注！
给个赞！