以前没注意的animate.css，今天也去看了看，总结一下1 安装 2 使用 3 用法基础用法给元素加上样式类 a

1 安装

npm install animate.css --save
或
yarn add animate.css

2 使用

import 'animate.css'
// 或使用CDN
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>

3 用法

基础用法

给元素加上样式类 animate__animated ，接着加上 animate__动画名称

    <h1 class="my-element animate__animated animate__bounce">An animated element</h1>

使用@keyframe

    .my-element {
        display: inline-block;
        margin: 0 0.5rem;
    
        animation: bounce; /* 直接使用动画@keyframe */
        animation-duration: 2s; 
    }

CSS自定义属性

版本4开始，可以自定义属性

    /* 只修改当前动画的执行时长 */
    .animate__animated.animate__bounce {
      --animate-duration: 2s;
    }
    
    /* 修改所有动画的执行时长 */
    :root {
      --animate-duration: 800ms;
      --animate-delay: 0.9s;
    }

可以通过JavaScript代码修改动画属性

    // 所有动画2s执行一次
    document.documentElement.style.setProperty('--animate-duration', '2s');
    
    // 所有动画0.5s执行一次
    document.documentElement.style.setProperty('--animate-duration', '.5s');

可用类

延时类

animate__delay-2s
animate__delay-3s
animate__delay-4s
animate__delay-5s

    <div class="animate__animated animate__bounce animate__delay-2s">Example</div>

延时类支持1s到5s，更长或更短时间需要使用 --animate-delay 自定义

    :root {
      --animate-delay: 6s;
    }
    
    :root {
      --animate-delay: 0.5s;
    }

速度类

animate__slow 2s
animate__slower 3s
animate__fast 800ms
animate__faster 500ms

    <div class="animate__animated animate__bounce animate__faster">Example</div>

速度类默认速度为1s，可以使用 --animation-duration 自定义属性

    :root {
      --animate-duration: 0.5s;
    }

重复类

animate__repeat-1
animate__repeat-2
animate__repeat-3
animate__infinite

    <div class="animate__animated animate__bounce animate__repeat-2">Example</div>

重复类默认次数为1，可以使用 --animate-repeat 自定义属性

    /* 最好不要全局设置 */
    .my-element {
      --animate-repeat: 2;
    }

最佳实践

添加有意义的动画
不要给大元素添加动画
不要给根元素添加动画

实在需要可以这样使用

    <body>
      <main class="animate__animated animate__fadeInLeft">
        <!-- Your code -->
      </main>
    </body>

尽量不使用infinite动画
注意元素的始终状态
不要禁用 prefers-reduced-motion 媒体查询

问题

不要为行内元素设置动画
在动画使元素溢出出现滚动条时，可以使用溢出隐藏解决问题
重复之间的间隔无法实现，可以自行使用js实现

使用js操作动画

使用js设置动画

const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');

可以检测到动画结束

element.addEventListener('animationend', () => {
  // do something
});

修改参数

element.style.setProperty('--animate-duration', '0.5s');

可以使用简单的函数添加动画类

const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });

animateCSS('.my-element', 'bounce');

// or
animateCSS('.my-element', 'bounce').then((message) => {
  // Do something after the animation
});

将3.X以及更低版本的切换到4.X版本

主要是将 animate.min.css 切换成 animate.compat.css ，这样3.X写的内容就不用加 animate__ 前缀了

import 'animate.min.css'
// 切换为
import 'animate.compat.css'



<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
  />
<!-- 切换为 -->
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css"
  />

更改默认前缀

在自定义构建中更改 animate 的前缀

/* package.json */
"animateConfig": {
  "prefix": "myCustomPrefix__"
},

重新构建

npm start