vue.js - v-bind :css ="false" do, 到底是什么，它记录在哪里？

Question

JavaScript Hooks 的 Vue 文档提到:

It’s ... a good idea to explicitly add v-bind:css="false" for JavaScript-only transitions so that Vue can skip the CSS detection. This also prevents CSS rules from accidentally interfering with the transition.

v-bind:css 有官方文档吗？某处？ (注意 - 我知道 v-bind directive 做了什么)

“CSS 检测”究竟是什么意思，在源代码中是在哪里完成的？

什么是会干扰过渡的 CSS 规则示例，从技术上讲，该指令如何防止这种情况发生？

我看到的唯一其他提到的地方是在 vue/test/unit/features/transition/transition.spec.js 的 Vue 源代码测试中。 ，但据我所知，该测试并没有真正检查与 CSS 相关的任何内容。

Answer 1

1. 有官方文档吗？
除了您已经找到的内容之外，我在任何地方都没有找到 :css 的任何官方文档。
2. 它有什么作用？
我自己对此进行调查，“CSS 检测”可能是错误的短语，IMO 它应该是这样的:

It’s ... a good idea to explicitly add v-bind:css="false" for JavaScript-only transitions so that Vue can skip applying the transition classes. This also prevents CSS rules from accidentally interfering with the transition.

:css 属性实际上非常简单。它实质上打开/关闭 的添加。 v-enter, v-enter-to, v-leave, v-leave-to 类到被转换的元素。我们可以在 transition-util.js 中看到来自 Vue 源代码:
过渡实用程序.js

if (def.css !== false) {
  extend(res, autoCssTransition(def.name || 'v'))
}

...

const autoCssTransition: (name: string) => Object = cached(name => {
  return {
    enterClass: `${name}-enter`,
    enterToClass: `${name}-enter-to`,
    enterActiveClass: `${name}-enter-active`,
    leaveClass: `${name}-leave`,
    leaveToClass: `${name}-leave-to`,
    leaveActiveClass: `${name}-leave-active`
  }
})

所以如果 CSS 属性未设置为 false 并且转换具有 姓名 属性，则此代码将应用 ${name}-enter , 否则适用 v-enter .
3. 示例干扰
就我个人而言，在转换组上使用自定义 Hook 来应用自定义类时，我遇到了干扰。例如:

<transition-group @enter="enterHook">...

methods: {
  enterHook (el) {
    el.classList.add('custom-enter-class')
  }
}

没有 :css="false"以编程方式添加/删除类时，我遇到了奇怪且不一致的行为。这个属性使事情变得更加健壮。