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

2019年3月19日08:49:37 发表评论 阅读(184)

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 的值,来决定哪个组件被渲染。

效果:点我查看

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
  • A+
所属分类:JS
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛