过渡作为根元素

重大变更

概述

将 <transition> 作为组件的根元素将不再在组件从外部切换时触发过渡。

2.x 行为

在 Vue 2 中，可以通过将 <transition> 作为组件的根元素来从组件外部触发过渡

<!-- modal component -->
<template>
  <transition>
    <div class="modal"><slot/></div>
  </transition>
</template>

<!-- usage -->
<modal v-if="showModal">hello</modal>

切换 showModal 的值将触发模态组件内部的过渡。

这是意外发生的，而不是设计使然。<transition> 应该由其子元素的更改触发，而不是由切换 <transition> 本身触发。

此怪癖现已移除。

迁移策略

可以通过向组件传递一个 prop 来实现类似的效果

<template>
  <transition>
    <div v-if="show" class="modal"><slot/></div>
  </transition>
</template>
<script>
export default {
  props: ['show']
}
</script>

<!-- usage -->
<modal :show="showModal">hello</modal>

另请参阅

• 一些过渡类已重命名
• <TransitionGroup> 现在默认情况下不渲染任何包装元素