vue动画库-Animate.css的使用以及部分问题

vue动画库-Animate.css的使用以及部分问题 Animate.css在vue脚手架中的使用

详情见官网： Animate.css | A cross-browser library of CSS animations.

两种使用方式 在style中使用

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
}
.slide-fade-enter-active {
  animation: jello 1s;
}
.slide-fade-leave-active {
  animation: jello 1s;
}

注意 ：在style中需要删除animate__jello前面的 animate__

直接在 class类上使用

注意：在类上使用前面一定要加上animate__animated，复制内容要完整

自定义过渡类名上使用

问题：类上定义的动画无法规定其动画时间和动画延迟时间

解决办法：

.animate__animated.animate__jello{
    --animate-duration: 5s;  // 动画时间
    --animate-delay: 0.9s;  // 动画延迟生效时间
}

AOS.js滚动动画库

第一步：npm install aos --save

第二步在main.js中：

import AOS from "aos";
import "../node_modules/aos/dist/aos.css";
Vue.use(AOS)

第三步：在当前组件引入import AOS from “aos”;

mounted() {
     AOS.init();
     // 你也可以在这里设置全局配置
      AOS.init({
        offset: 200,   
        duration: 600,   //持续时间
        easing: 'ease-in-sine',   
        delay: 100
     })
    },