如何用JS代码封装来实现transition过渡效果（渐隐无法实现？）

来源：5-7 Vue中的动画封装

hustnzj

2020-02-22

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue中的动画封装</title>
    <!-- <style>
      .v-enter,
      .v-leave-to {
        opacity: 0;
      }
      .v-enter-active,
      .v-leave-active {
        transition: opacity 1s;
      }
    </style> -->
  </head>
  <body>
    <div id="app">
      <!-- <transition>
        <div v-show="show">hello world</div>
      </transition> -->
      <fade :show="show">
        <div>hello world</div>
      </fade>

      <fade :show="show">
        <h1>hello world</h1>
      </fade>

      <button @click="handleClick">toggle</button>
    </div>
    <script src="./vue.js"></script>
    <script>
      Vue.component('fade', {
        props: ['show'],
        template: `
          <transition @before-enter="handleBeforeEnter" @enter="handleEnter" @leave="handleLeave" @after-leave="handleAfterLeave">
            <slot v-if="show"></slot>  
          </transition>
        `,
        methods: {
          handleBeforeEnter(el) {
            el.style.opacity = 0;
          },
          handleEnter(el, done) {
            setTimeout(() => {
              el.style.transition = 'opacity 2s';
              el.style.opacity = 1;
              done();
            }, 0);
          },
          handleLeave(el, done) {
            setTimeout(() => {
              el.style.transition = 'opacity 2s';
              el.style.opacity = 0;
              done();
            }, 0);
          },
          handleAfterLeave(el) {
            console.log('after leave');
          }
        }
      });
      var vm = new Vue({
        el: '#app',
        data: {
          show: false
        },
        methods: {
          handleClick() {
            this.show = !this.show;
          }
        }
      });
    </script>
  </body>
</html>

试了好久，还是无法搞出来，请老师或同学们指点。谢谢。

写回答

1回答