vue引入animate.css动画

by shuai shen

HTML

<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css">
<div id="app">
  <transition enter-active-class="animated slideInDown"
              leave-active-class="animated fadeOutDownBig">
     <div v-show="show">animation</div>
  </transition>
  <button @click="toggle">控制显示隐藏</button>
</div>

CSS

button{
  position:absolute;
  top:200px;
}

JavaScript

var vm = new Vue({
  el: "#app",
  data () {
    return {
      show: true
    }
  },
  methods: {
    toggle: function () {
      this.show = !this.show;
    }
  }
});