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.使用

 

   
       
内容 盒子
  

css

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

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

 
      
内容盒子

这样进出都可以有动画了

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

image.png

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