Angular 2+ CSS 动画组件 - css-animator

Angular 2+ CSS 动画组件 - css-animator
插件名称 css-animator
发布时间 2020年9月9日
插件作者 fabiandev

使用支持Angular2的CSS类对元素进行动画处理。

当没有可用的动画生成器可用时,创建该包是出于在Angular2中将CSS动画与animate.css之类的库一起使用的需要。

css-animator可与任何JavaScript应用程序一起使用,并且省去了手动应用CSS动画的麻烦。除其他有用的东西外,它还照顾被动画化的定位元素。

安装:

# Yarn
yarn add css-animator

# NPM
$ npm install css-animator

# Bower
$ bower install css-animator

基本用法

您可以在没有Angular2的情况下使用css-animator。只需导入课程并设置任何动画即可HTMLElement

import { AnimationBuilder } from 'css-animator/builder';

let animator = new AnimationBuilder();

animator.setType('shake').animate(element);

想知道动画何时完成?AnimationBuilder实例返回一个承诺:

animator
  .setType('shake')
  .animate(element)
  .then(() => {
    // 动画结束
  })
  .catch(() => {
    // 动画打断
  });

您还可以更改更改后创建的每个实例的默认选项:

import { AnimationBuilder } from 'css-animator/builder';

AnimationBuilder.defaults.fixed = true;
AnimationBuilder.defaults.duration = 1500;