关于vue状态过渡transition不起作用的原因解决

  • Z时代
  • 2024-01-10
  • 分类：综合

总所周知，vue中的transition标签可以方便得进行动画过渡，使用的方法也很简单。

<transition name="你要的名字">
  过渡的元素...
</transition>

这里需要主要一点的是：过渡的元素只能是以下之一：

条件渲染 (使用 v-if)

条件展示 (使用 v-show)

动态组件

组件根节点

常用的过渡名称有fade等

你可以这样用

<transition name="fade">
  过渡的元素...
</transition>

实现的效果就是淡入淡出。

如果需要自定义过渡动画的，记得在css中修改以下的类名：

你要的名字-enter             进入前效果

你要的名字-enter-active     进入的过渡时间和函数

你要的名字-enter-to         进入后效果

你要的名字-leave             离开前效果

你要的名字-leave-active     离开的过渡时间和函数

你要的名字-leave-to         离开后效果

写到这里相信大家都已经会简单地使用transition了。

请阅读以下的代码：

<transition name="fade">
   <div v-if="show">
     <div class="item-box"></div>
   </div>
   <div v-else>
     <span>暂无更多</span>
   </div>
</transition>

结果是完全没有淡入淡出的效果，那这是什么原因导致transition不起作用呢？

原因在这里：

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。

所以需要这样写：

<transition name="fade">
   <div v-if="show" key="box1">
     <div class="item-box"></div>
   </div>
   <div v-else key="box2">
     <span>暂无更多</span>
   </div>
</transition>

刷新运行，完美实现效果～～～～

参考资料：https://cn.vuejs.org/v2/guide/transitions.html

补充：

问题1：不同类型的组件之间切换，有过渡效果，而相同组件(不同内容)切换则没有过渡效果

vue官网的描述：当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 组件中的多个元素设置 key 是一个更好的实践。

改进后代码

<transition :name="slide">
 <keep-alive>
  <component 
   :is="questionMap[currentQuestion.type]"
   :key="index"
   :currentQuestion="currentQuestion"
   :index="index">
  </component>
 </keep-alive>
</transition>

给组件添加了key=”index”了之后，不管任何类型都有过渡效果了，因为此时vue将每一个组件区分为不同的组件

问题2：前一个组件滑动出去后，后一个组件没有滑动效果，而是直接显示了

过渡模式有一个问题：一个离开过渡的时候另一个开始进入过渡。这是 的默认行为 - 进入和离开同时发生，因为这样也导致了两个卡片的过渡不太复合需求，我们需要的是一个先离开后另一个再进入。

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模式

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

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

因此我们需要在transition标签中添加mode来达成效果：

<transition :name="slide" mode="out-in">
 <keep-alive>
  <component 
   :is="questionMap[currentQuestion.type]"
   :key="index"
   :currentQuestion="currentQuestion"
   :index="index">
  </component>
 </keep-alive>
</transition>

如果要使用列表排序的话，需要使用transition-group，下面是一个简单的例子

<div id="list-demo" class="demo">
 <button v-on:click="add">Add</button>
 <button v-on:click="remove">Remove</button>
 <transition-group name="list" tag="p">
  <span v-for="item in items" v-bind:key="item" class="list-item">
   {{ item }}
  </span>
 </transition-group>
</div>

new Vue({
 el: '#list-demo',
 data: {
  items: [1,2,3,4,5,6,7,8,9],
  nextNum: 10
 },
 methods: {
  randomIndex: function () {
   return Math.floor(Math.random() * this.items.length)
  },
  add: function () {
   this.items.splice(this.randomIndex(), 0, this.nextNum++)
  },
  remove: function () {
   this.items.splice(this.randomIndex(), 1)
  },
 }
})

.list-item {
 display: inline-block;
 margin-right: 10px;
}
.list-enter-active, .list-leave-active {
 transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
 opacity: 0;
 transform: translateY(30px);
}

以上是 关于vue状态过渡transition不起作用的原因解决 的全部内容， 来源链接： utcz.com/z/358815.html

回到顶部