Vue封装动画插件，渐隐渐现效果

2019-07-30

字数统计: 721 | 阅读时长≈ 4 分钟

通过js封装的Vue渐隐渐现效果大体两种方法：1、通过Velocity.js 2、原生js写动画

1、通过Velocity.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>list transition</title>
    <script src="./vue.js"></script>
    <script src="./velocity.min.js"></script>
  </head>

  <body>
    <div id="app">
      <fade :show="show">
        <div>woshi content</div>
      </fade>
      <button @click="handleBtnClick">qiehunbhzuan</button>
    </div>
    <script>
      Vue.component('fade', {
        props: ['show'],
        template: `
          <transition
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnter"
            @before-leave="handleBeforeLeave"
            @leave="handleLeave"
            @after-leave="handleAfterLeave">
              <slot v-if="show"></slot>
            </transition>
        `,
        methods: {
          handleBeforeEnter(el) {
            el.style.opacity = '0'
          },
          handleEnter(el, done) {
            Velocity(
              el,
              { opacity: 1 },
              {
                duration: 1000,
                complate: done 
              }
            )
          },
          handleAfterEnter(el) {},
          handleBeforeLeave(el) {},
          handleLeave(el, done) {
            Velocity(
              el,
              { opacity: 0 },
              {
                duration: 1000,
                complate: done 
              }
            )
          },
          handleAfterLeave(el) {}
        }
      })

      var app = new Vue({
        el: '#app',
        data: {
          show: false
        },
        methods: {
          handleBtnClick() {
            this.show = !this.show
          }
        }
      })
    </script>
  </body>
</html>

自行引入vuejs文件，Velocityjs文件，其中多余的动画钩子函数，可以自行去除。

2、通过原生js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>list transition</title>
    <script src="./vue.js"></script>
    <script src="./velocity.min.js"></script>
  </head>

  <body>
    <div id="app">
      <fade :show="show">
        <div>woshi content</div>
      </fade>
      <button @click="handleBtnClick">qiehunbhzuan</button>
    </div>
    <script>
      Vue.component('fade', {
        props: ['show'],
        template: `
          <transition
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnter"
            @before-leave="handleBeforeLeave"
            @leave="handleLeave"
            @after-leave="handleAfterLeave">
              <slot v-if="show"></slot>
            </transition>
        `,
        methods: {
          handleBeforeEnter(el) {
            el.style.opacity = '0'
          },
          handleEnter(el, done) {
            el.style.transition = 'all 1s'
            setTimeout(() => {
              done()
            })
          },
          handleAfterEnter(el) {
            el.style.opacity = '1'
          },
          handleBeforeLeave(el) {},
          handleLeave(el, done) {
            el.style.opacity = '0'
            el.style.transition = 'all 1s'
            // setTimeout(() => {
            //   done()
            // }, 1000)
          },
          handleAfterLeave(el) {}
        }
      })

      var app = new Vue({
        el: '#app',
        data: {
          show: false
        },
        methods: {
          handleBtnClick() {
            this.show = !this.show
          }
        }
      })
    </script>
  </body>
</html>

其中done函数的调用必须是异步的，也就是同步任务之后，这样才可以在动画全部设置之后，在进行下一步。在handleLeave函数中注释了done函数的调用，因为如果调用，动画完成后会销毁组件。

打赏

版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！