本文最后更新于2019年3月18日，已超过一年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！
之前写过是一个元素的出场/离场过渡，那么如果是多个元素的过渡以及多个组件的过渡效果要怎么来写呢？
多个元素过渡
我们现在使用两个p标签，其中包含2段文字，来看一下他们的过渡效果：
- .v-enter, .v-leave-to {
- opacity: 0;
- }
- .v-enter-active, .v-leave-active {
- transition: opacity 1s;
- }
- <button @click="see=!see">点我</button>
- <transition >
- <p v-if="see" >hello world!</p>
- <p v-else >by world!</p>
- </transition>
然后我们会发现上面的代码虽说实现了点击按钮会切换文字，但是是没有过渡效果的，这是为什么呢？
因为当有相同标签名(本文是P标签)的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。
即使在技术上没有必要，给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。
- <button @click="see=!see">点我</button>
- <transition mode="out-in">
- <p v-if="see" key="hello">hello world!</p>
- <p v-else key="world">by world!</p>
- </transition>
另外Vue 提供了 过渡模式
in-out：新元素先进行过渡，完成之后当前元素过渡离开。out-in：当前元素先进行过渡，完成之后新元素过渡进入。
使用]in-out效果：点我查看
使用out-in效果：点我查看
多个组件的过渡
组件的过渡我们可以使用动态组件：
- <button @click="handleClickA">A</button>
- <button @click="handleClickB">B</button>
- <transition mode="out-in">
- <component :is="type"></component>
- </transition>
- methods: {
- handleClickA: function () {
- this.type = 'child-a'
- },
- handleClickB: function () {
- this.type = 'child-b'
- }
- }
component渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。
效果：点我查看
微信小程序
互联网开发，终身学习者，欢迎您的关注！
