Vue.js中文网

# Transition 作为 Root
非兼容

# 概览

使用一个 <transition> 作为一个组件的根结点，当组件从外部被切换时将不再触发过渡效果。

# 2.x 行为

在 Vue 2，通过使用 <transition> 作为一个组件的根节点，是可能从组件外部触发一个过渡效果的：

<!-- 模态组件 -->
<template>
  <transition>
    <div class="modal"><slot/></div>
  </transition>
</template>
1
2
3
4
5
6
<!-- 用法 -->
<modal v-if="showModal">hello</modal>
1
2

切换 showModal 的值将会在模态组件内部触发一个过渡效果。

这是无意为之的，并不是刻意为之。一个 <transition> 原本希望是被其子元素触发的，而不是被 <transition> 自己切换。

这个怪异的现象现在被移除了。

# 迁移策略

换做向其组件传递一个 prop 就可以达到类似的效果：

<template>
  <transition>
    <div v-if="show" class="modal"><slot/></div>
  </transition>
</template>
<script>
export default {
  props: ['show']
}
</script>
1
2
3
4
5
6
7
8
9
10
<!-- 用法 -->
<modal :show="showModal">hello</modal>
1
2

# 参考

← Transition Group 根元素 →