关于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 相关文章推荐
JavaScript Accessor实现说明
Dec 06 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
通过JS判断网页是否为手机打开
Oct 28 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
PHP实现从远程下载文件的方法
2015/03/12 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
javascript 获取图片颜色
2009/04/05 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
使用Python的PEAK来适配协议的教程
2015/04/14 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
汉语专业应届生求职信
2013/10/01 职场文书
企业军训感言
2014/02/08 职场文书
目标责任书格式
2014/07/28 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python