Hao

Vue中多个元素或组件的过渡

JavaScript 2019-03-19 2048 0
08:49:37

Vue中多个元素或组件的过渡

之前写过是一个元素的出场/离场过渡，那么如果是多个元素的过渡以及多个组件的过渡效果要怎么来写呢？

多个元素过渡

我们现在使用两个p标签，其中包含2段文字，来看一下他们的过渡效果：

  1. .v-enter, .v-leave-to {
  2.             opacity: 0;
  3.         }
  4. .v-enter-active, .v-leave-active {
  5.             transition: opacity 1s;
  6.         }
  1. <button @click="see=!see">点我</button>
  2.     <transition >
  3.         <p v-if="see" >hello world!</p>
  4.         <p v-else >by world!</p>
  5.     </transition>

然后我们会发现上面的代码虽说实现了点击按钮会切换文字，但是是没有过渡效果的，这是为什么呢？

因为当有相同标签名(本文是P标签)的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

即使在技术上没有必要，给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。

  1. <button @click="see=!see">点我</button>
  2.     <transition mode="out-in">
  3.         <p v-if="see" key="hello">hello world!</p>
  4.         <p v-else  key="world">by world!</p>
  5.     </transition>

另外Vue 提供了 过渡模式

  • in-out：新元素先进行过渡，完成之后当前元素过渡离开。
  • out-in：当前元素先进行过渡，完成之后新元素过渡进入。

使用]in-out效果：点我查看

使用out-in效果：点我查看

多个组件的过渡

组件的过渡我们可以使用动态组件：

  1. <button @click="handleClickA">A</button>
  2.     <button @click="handleClickB">B</button>
  3.     <transition mode="out-in">
  4.         <component :is="type"></component>
  5. </transition>
  1. methods: {
  2.             handleClickA: function () {
  3.                 this.type = 'child-a'
  4.             },
  5.             handleClickB: function () {
  6.                 this.type = 'child-b'
  7.             }
  8.         }

component渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。

效果：点我查看

 

本文由 Hao创作，转载请注明

最后编辑时间：2019-03-18 14:40:35

发表评论