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 - 引入及使用
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
动画样式在右侧边栏 可以选择自己需要的 点击复制类名
image.png
如果没有动画 检查一下元素有没有给宽高 简单的vue&&Animate.css 介绍就结束了
