vue & animate.css 使用讲解

Animate.css 库 官网 https://animate.style/
Vue 讲解 transition 官网 https://cn.vuejs.org/v2/guide/transitions.html

• 1.安装库
  npm install animate.css --save
  或者 yarn add animate.css
• 2. 引入及使用

main.js
import animated from 'animate.css' 

Vue.use(animated)

• 3.使用

 <div class=" goodlist animate__animated  animate__backInLeft  " >
   <!-- 第一个类名是容器的类名 第二个 animate__animated  为固定的类名 必须要加  第三个animate__backInLeft  是我们在动画库中 选择的效果-->
       <div>内容 盒子</div>  
</div>

css

.goodlist{ width:200px height:200px; background:red;  
animation-duration:2s //设置动画一共需要的时间
}

• 如果进入和离开的动画都需要设置 可以在盒子外面加一个transtion vue自带的属性

 <transition enter-active-class="animate__backInDown" leave-active-class="animate__rotateOut">
      <div class="goodlist  animate__backInDown">内容盒子</div>
</transition>
这样进出都可以有动画了

enter-active-class leave-active-class 两个固定属性 是vue中 transition中自带属性 详情可以点击官网了解 https://cn.vuejs.org/v2/guide/transitions.html
动画样式在右侧边栏 可以选择自己需要的 点击复制类名

如果没有动画 检查一下元素有没有给宽高 简单的vue&&Animate.css 介绍就结束了