[JavaScript知识库]vue 过渡效果中 leave 钩子函数没有过渡效果

在vue 过渡中，仅用JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则after-enter和 after-leave不会调用，并且enter 和 leave将被同步调用，过渡会立即完成。

但在 leave中使用done回调时，
离开状态也会立即执行，即使不调用done（）函数，leave参数done必须传，不传也会立即删除元素导致动画不执行，但不调用done函数， after-leave又不能执行，导致元素样式display属性不为none，消失不了

这跟官网有点出入，不知道什么原因造成的

总结了两种解决办法：

<template>
  <div class="test">
    <transition
     ：css='false'
      name="Carousel"

      @before-enter=" beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @before-leave="beforeLeave"
      
      @after-leave="afterLeave"
      @leave="leave"
    >
      <div class="s" @click="handleClick" v-show ="isShow" ref="s" ></div>
    </transition>

    <button @click="handleClick">切换</button>
  </div>
</template>
<script>
// import Page from "@/components/page";
export default {
  components: {},
  data() {
    return {
      isShow: false,
      
    };
  },

  methods: {
    handleClick() {
      
      this.isShow = !this.isShow;
      console.log(this.isShow)
    },

    // 进入的样式
    beforeEnter(el) {
      //  el.style.position= 'absolute',
       (el.style.top = "150px"),
       (el.style.left = "150px"),
      //  el.style.background= 'rgb(0,0,0)'
      console.log("进入前", el.className);
    },

    enter(el,done) {
      el.offsetWidth;
      el.style.transition = " all 5s";
      done();
      console.log("进入时",el.className,done);
    },
    afterEnter(el) {
      (el.style.top = "50%"),
      (el.style.left = "50%"),
      el.style.background= 'rgb(0,0,0)'
      console.log("进入后", el.style.display);
    },

    // 离开
    beforeLeave(el) {

      console.log("离开前", el.className);
      el.style.transition = " all 5s";
    },

    leave(el, done ) {
             // 参数done必须传，不传或调用done的话由于会立即删除元素导致动画不执行   
        (el.style.top = "0"),
        (el.style.left = "0"),

        console.log("离开时", el,done,this.isShow);
		// 方法1： 这里不调用，但参数done必须传，不传或调用done的话由于会立即删除元素导致动画不执行  				过渡动画会执行，且style 里  display 不为none，不隐藏
        // done();   
         //方法2:
         // setTimeout(done,5000)
 		//方法3:
        el.addEventListener('transitionend',function(){
          done()
        })
    },

    afterLeave(el) {
        setTimeout(function(){
        
        (el.style.top = "0"),
        (el.style.left = "0"),

      console.log("离开后", el.style.display);
        },200)

      
   
    },
  },
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/common.less";

.test {
  position: relative;
  width: 100%;
  height: 800px;

  button {
    position: absolute;
    top: 150px;
  }

  .s {
    position: absolute;
    // top: 50%;
    // left: 50%;
    width: 100px;
    height: 100px;
    background: brown;
  }
}
</style>

有没有人知道，这是什么原因造成的？