Vue过渡-JavaScript钩子

Question

基于this answer，我试图使用过渡来创建Vue slideToggle组件。

slideToggle是高度动画的经典范例。到目前为止，我已经成功了...

我不想设置固定的max-height或height，我希望height是动态的。

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

如何处理@enter-cancelled和@leave-cancelled钩子？我是vue过渡的新手：）

我将代码放入此CodeSandBox中：https://codesandbox.io/s/vue-template-3b7oj

Answer 1

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

声明一个新变量：

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

打开或关闭功能启动时，请验证toggling是否为真，如果是，则取消，就像这样：

    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;
      });
    },

将是这样的： https://codesandbox.io/s/vue-template-78n7t?fontsize=14

也许我破解了您的代码，对不起，您会明白的。

Answer 2

Vue转换取消

tl; dr

---

• 离开事件取消尚未调用的回车
• 进入取消尚未休假的假期

取消状态存储在

• el._enterCb.cancelled

• el._leaveCb.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
  })

  

来源：_enterCb

所以取消@enter的天真解决方案是

el => {el._enterCb.cancelled = true; done()}

---

这是一个触发leave

时实际发生的情况

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

  

来源：leave

---

同样适用于：

  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
  })

  

来源：_leaveCb

---

一个人可以检查可能的分配：

https://github.com/vuejs/vue/search?q=_leaveCb&unscoped_q=_leaveCb

Answer 3

根据官方文档Javacript transition hooks @ leave-cancelled仅在v-show中可用，在示例代码中使用v-if的地方，如果更改此选项，则可以捕获@ leave-cancelled钩子，@ leave-cancelled和@enter当取消进入或离开时触发-取消，例如您在打开时按下切换按钮，在关闭时按下按钮。