Vue transition & animate.css

by jacob hsu

HTML

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
<div id="app">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <!-- type="transition" 告知以transition時長為準 3秒而不是1秒-->
  <!-- :duration="5000" 自定義動畫時長-->
  <!-- :duration="{enter: 5000, leave:10000}" 自定義動畫時長-->
  <transition type="transition" name="fade"
    appear
    enter-active-class="animated swing fade-enter-active"
    leave-active-class="animated shake fade-leave-active"
    appear-active-class="animated swing">
    <p v-if="show">hello</p>
  </transition>
</div>

CSS

.fade-enter-active, .fade-leave-active {
  transition: opacity 3s; /* 时刻监听opacity的属性 一旦发生变化 .5秒内发生过渡 */
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0; /* 被移除默认值为1 不透明(显示) */
}

Vue

new Vue({
  el: "#app",
  data: {
    show: true
  }
})