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


Posted in Javascript onApril 09, 2019

总所周知,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);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
ES6的解构赋值实例详解
May 06 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 #Javascript
Angular脚手架开发的实现步骤
Apr 09 #Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 #Javascript
javascript实现手动点赞效果
Apr 09 #Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 #Javascript
浅谈Vue.js组件(二)
Apr 09 #Javascript
4 种滚动吸顶实现方式的比较
Apr 09 #Javascript
You might like
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
Pycharm学习教程(2) 代码风格
2017/05/02 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
.net C#面试题
2012/08/28 面试题
幼师专业求职推荐信
2013/11/08 职场文书
办理信用卡工作证明
2014/01/11 职场文书
新年寄语大全
2014/04/12 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
安全例会汇报材料
2014/08/23 职场文书
党员干部学习心得体会
2016/01/23 职场文书
高考升学宴主持词
2019/06/21 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
golang 实现时间戳和时间的转化
2021/05/07 Golang
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers