6、Vue中的动画封装（Vue 中的动画特效）

作者: 秋玄语道 | 来源:发表于2018-06-30 11:49 被阅读0次

6、Vue中的动画封装（Vue 中的动画特效）
Vue动画
前端系统学习 10. Vue高级用法
vue的动画特效
vue中动画封装
Vue中的动画封装
Vue中的动画封装
Vue中的动画封装
jQuery的动画特效
vue_24 vue中的动画封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的动画封装</title>
    <script src="js/vue.js"></script>
    <style>
        .v-enter,.v-leave-to{
            opacity: 0;
        }
        .v-enter-active,.v-leave-active{
            transition: opacity 1s;
        }
    </style>
</head>
<body>
  <div id="app">
      <fade :show="show">
          <div>hello world</div>
      </fade>
      <fade :show="show">
          <h1>hello world</h1>
      </fade>
      <button @click="handleBtnClick">Add</button>
  </div>
  <script>
      Vue.component('fade',{
          props:['show'],
          template:'<transition @before-enter="handleBeforeEnter" @enter="handleEnter">' +
          '<slot v-if="show"></slot></transition>',
          methods:{
              handleBeforeEnter:function (el) {
                  el.style.color='red'
              },
              handleEnter:function (el,done) {
                  setTimeout(()=>{
                      el.style.color ='blue',
                      done()
                  },2000)
              }
          }
      })
      var count =0;
      var vm =new Vue({
          el:"#app",
          data:{
              show:false
          },
          methods:{
              handleBtnClick:function () {
                  this.show=!this.show
              }
          }
      })
  </script>
</body>
</html>