关于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 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
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
桌面中心(一)创建数据库
2006/10/09 PHP
一些关于PHP的知识
2006/11/17 PHP
php 使用array函数实现分页
2015/02/13 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
js验证表单第二部分
2006/11/25 Javascript
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
js实现文字跑马灯效果
2017/02/23 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python遍历指定文件及文件夹的方法
2015/05/09 Python
python实现excel读写数据
2021/03/02 Python
儿童编程python入门
2018/05/08 Python
python网络应用开发知识点浅析
2019/05/28 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
俄语专业毕业生推荐信
2013/10/28 职场文书
实习生自我鉴定范文
2013/12/05 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
阿凡达观后感
2015/06/10 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
如何使JavaScript休眠或等待
2021/04/27 Javascript