关于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 相关文章推荐
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
使用AOP改善javascript代码
May 01 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
vue form check 表单验证的实现代码
Dec 09 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
PHP session会话的安全性分析
2011/09/08 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
js获取php变量的实现代码
2013/08/10 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
nodejs的路径问题的解决
2018/06/30 NodeJs
详解React之key的使用和实践
2018/09/29 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
教师中国梦演讲稿
2014/04/23 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
县级文明单位申报材料
2014/05/23 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
单位接收函格式
2015/01/30 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL