vue_组件动画封装 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style type="text/css">
  </style>
</head>
<body>
  <div id="app">
    <h3>动画封装</h3>
    <fade :show="show"><h2>hello world</h2></fade>
    <fade :show="show"><div>bye world</div></fade>
    <button @click="handleClick">切换</button>
  </div>
</body>
<script type="text/javascript">
  Vue.component('fade', {
    props:['show'],
    template:`
      <transition 
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        @before-leave="beforeLeave"
        @leave="leave"
        @after-leave="afterLeave"
      >
        <slot v-if="show"></slot>
      </transition>
    `,
    methods: {
      beforeEnter (el) {
        el.style.color = 'red'
      },
      enter (el, done) {
        setTimeout(()=> {
          el.style.color = 'green'
        },1000)
        setTimeout(()=> {
          done()
        },3000)
      },
      afterEnter (el) {
        el.style.color = 'blue'
      },
      beforeLeave (el) {
        el.style.opacity = 1
        el.style.fontSize = '16px'
      },
      leave (el, done) {
        Velocity(el, {
          opacity: 0,
          fontSize: '0px'
        },{
          duration: 1000,
          complete: done
        })
      },
      afterLeave (el) {
        console.log('动画结束')
      }
    }
  })
  let vm = new Vue({
    el: '#app',
    data: {
      show: true
    },
    methods: {
      handleClick () {
        this.show = !this.show
      }
    }
  })
</script>
</html>

 

posted @ 2020-03-10 16:53  前端之旅  阅读(264)  评论(0)    收藏  举报