三六、vue中使用animate.css

1.npm install animate.css –save

2.main.js中引入

• import animate from ‘animate.css’
  Vue.use(animate)

3.页面中使用

<style type="text/css">
    p {
      width: 300px;
      height: 300px;
      background: red;
      margin: 10px auto;
    }
  style>
  <script type="text/javascript">
    window.onload = function(){
      var app = new Vue({
        el:'#box',
        data:{
          show:false
        }
      })
    }
  script>
    
    <button @click="show=!show">transitionbutton>
    
    

    
    

    
    <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
      <p v-show="show" class="animated" :key="1">p>
      <p v-show="show" class="animated" :key="2">p>
    transition-group>