vue2.0—使用animate.css
构建项目和创建组件就不细说了，不懂的可以去官方文档API学习
VUE官方文档：https://cn.vuejs.org/v2/guide/
1.下载animate.css
cnpm install vue2-animate -S
2.在main.js 中引入animate.css
import Vue from 'vue'
import App from './App'
import router from './router'
import 'vue2-animate/dist/vue2-animate.min.css';
Vue.config.productionTip = false;
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3.在组件中使用
<el-button type="primary" @click="animate">点击发生动画</el-button>
<transition enter-active-class="animated bounceInDown" leave-active-class="animated bounceInLeft">
<p v-if="flag2">Animate</p>
</transition>
<script>
export default {
data(){
return{
flag2:true,
}
},
methods:{
animate(){
this.flag2 = !this.flag2;
}
},
}
</script>
