Vue中使用animation.css

wdapp發表於2020-02-08
VueCSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue中使用animation.css</title>
    <link rel="stylesheet" href="res/animate.css">
  <script src="js/vue.js"></script>
  <style>
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }

    .enter {
      transform-origin: left center;
      animation: bounce-in 1s;
    }

    .leave {
      transform-origin: left center;
      animation: bounce-in 1s reverse;
    }

    /*.fade-enter, .fade-leave-to{*/
    /*  opacity: 0;*/
    /*}*/
    /*.fade-enter-active, .fade-leave-active {*/
    /*  transition: opacity 1s;*/
    /*}*/
  </style>
</head>
<body>
<div id="app">
  <transition
      name="fade"
      enter-active-class="enter"
      leave-active-class="leave"
  >
    <div v-show="isShow">hello world</div>
  </transition>
  <transition
      name="fade"
      :duration="500"
      enter-active-class="animated slideInLeft"
      leave-active-class="animated shake"
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
      v-on:enter-cancelled="enterCancelled"

      v-on:before-leave="beforeLeave"
      v-on:leave="leave"
      v-on:after-leave="afterLeave"
      v-on:leave-cancelled="leaveCancelled"
  >
    <div v-show="isShow">animation</div>
  </transition>
  <button @click="handleClick">toggle</button>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      isShow: true
    },
    methods: {
      handleClick () {
        this.isShow = !this.isShow
      },
      // --------
      // 進入中
      // --------

      beforeEnter: function (el) {
        console.log('beforeEnter')
      },
      // 當與 CSS 結合使用時
      // 回撥函式 done 是可選的
      enter: function (el, done) {
        console.log('enter')
        done()
      },
      afterEnter: function (el) {
        console.log('afterEnter')
      },
      enterCancelled: function (el) {
        console.log('enterCancelled')
      },

      // --------
      // 離開時
      // --------

      beforeLeave: function (el) {
        console.log('beforeLeave')
      },
      // 當與 CSS 結合使用時
      // 回撥函式 done 是可選的
      leave: function (el, done) {
        console.log('leave')
        done()
      },
      afterLeave: function (el) {
        console.log('afterLeave')
      },
      // leaveCancelled 只用於 v-show 中
      leaveCancelled: function (el) {
        console.log('leaveCancelled')
      }
    }
  })
</script>
</body>
</html>
複製程式碼

相關文章