vue—animate动画库
animate动画库:https://animate.style/
代码演示:
1、终端下载动画库 npm install animate.css --save
2、在main.js中使用
// animate动画库
import animate from 'animate.css'
Vue.use(animate)
3、在页面使用
<div id="wrap"> <button @click="show=!show">切换</button>
<transition name="fade" enter-active-class="animate__animated animate__shake" leave-active-class="animate__animated animate__flipOutX">
<h1 v-if="show">王先生</h1>
</transition>
</div>
注意:
类名中一定要添加“animate__animated”
而“animate__fadeIn”为可替换部分
JavaScript
var vm = new Vue({
el: '#wrap',
data: {
show: true
},
methods: {}
})
将需要添加动画的标签用transition包裹,设置进入与隐藏的过渡动画,enter-active-class="animated shake"shake是动画效果名称,可以在官网查看
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果