vue2.0—使用animate.css

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>