Vue转换-JavaScript挂钩

基于，我尝试使用transition创建一个Vue

slideToggle

组件

滑动切换是高度动画中的经典范例。到目前为止我一直很成功

我不希望设置固定的

最大高度

或

高度

，我希望

高度

是动态的

我的动画在显示和隐藏时工作正常。问题在于显示或隐藏时取消

如何处理

@enter cancelled

和

@leave cancelled

挂钩？我是vue过渡的新手：）

---

我将代码放在这个代码沙盒中：

我不知道这是否对您有帮助，但请尝试以下方法：

声明一个新变量：

data() {
  return {
    height: null,
    toggling: false
  };
},

打开或关闭功能启动时，验证切换是否为真，如果为真，只需取消，如下所示：

    enter(el) {
      if (this.toggling) return;
      this.toggling = true;
      this.height = el.offsetHeight;

      el.style.overflow = "hidden";
      el.style.height = 0;
      el.style.paddingTop = 0;
      el.style.paddingBottom = 0;
      el.style.marginTop = 0;
      el.style.marginBottom = 0;

      setTimeout(() => {
        el.style.transitionProperty = `height, margin, padding`;
        el.style.transitionDuration = this.duration + "ms";
        el.style.height = this.height + "px";
        el.style.removeProperty("padding-top");
        el.style.removeProperty("padding-bottom");
        el.style.removeProperty("margin-top");
        el.style.removeProperty("margin-bottom");
        this.toggling = false;
      });
    },

将是这样的：

很抱歉，可能是我弄坏了你的代码，但你会明白吗。

Vue Transition Cancel tl；dr

---

• 休假事件取消尚未调用enter
• 输入取消尚未调用的休假

取消状态存储在

• el.\u输入取消

• el.\u leaveCb.取消

---

分析

---

考虑： 资料来源：

因此，取消

@enter

的简单解决方案是

el=>{el.\u enterCb.cancelled=true；done（）}

---

这就是当一个人触发离开时实际发生的情况 资料来源：

---

这同样适用于： 资料来源：

---

可以检查可能的任务：

---

根据官方文件 @leave cancelled仅在v-show中可用，在您使用的示例代码中，如果您更改此选项，您将能够捕获@leave cancelled钩子，@leave cancelled和@enter cancelled在进入或离开中断时被触发，假设您在打开时按下切换按钮，以及在关闭时按下按钮

const cb = el._enterCb = once(() => {
    if (expectsCSS) {
      removeTransitionClass(el, toClass)
      removeTransitionClass(el, activeClass)
    }
    if (cb.cancelled) {
      if (expectsCSS) {
        removeTransitionClass(el, startClass)
      }
      enterCancelledHook && enterCancelledHook(el)
    } else {
      afterEnterHook && afterEnterHook(el)
    }
    el._enterCb = null
  })

// call enter callback now
  if (isDef(el._enterCb)) {
    el._enterCb.cancelled = true
    el._enterCb()
  }

  const cb = el._leaveCb = once(() => {
    if (el.parentNode && el.parentNode._pending) {
      el.parentNode._pending[vnode.key] = null
    }
    if (expectsCSS) {
      removeTransitionClass(el, leaveToClass)
      removeTransitionClass(el, leaveActiveClass)
    }
    if (cb.cancelled) {
      if (expectsCSS) {
        removeTransitionClass(el, leaveClass)
      }
      leaveCancelled && leaveCancelled(el)
    } else {
      rm()
      afterLeave && afterLeave(el)
    }
    el._leaveCb = null
  })