Vue过渡mode属性踩坑
近期学习Vue的过渡效果的时候，mode属性的"in-out"、"out-in"设置了不起作用，官网上的例子让我看了有点迷，问题解决后以此文记录之。
首先我们看一下vue中文文档的说法
根据这样的描述我写出了如下代码demo
<style type="text/css">
.on-enter-active,.off-enter-active{
transition: 2s ease;
}
.on-leave-active,.off-leave-active{
transition: 3s ease;
}
.on-enter,.on-leave-to,.off-enter,.off-leave-to{
opacity: 0;
}
</style>
</head>
<body>
<div id="test">
<transition name="on" mode="out-in">
<button v-if="show">on</button>
</transition>
<transition name="off" mode="out-in">
<button v-if="!show">off</button>
</transition>
<button style="margin-top: 100px;" @click="show=!show">切换</button>
</div> <script src="vue.js"></script>
<script>
new Vue({
el:'#test',
data:{
show:true
}
})
</script>
但是这样的写法，当我点击切换按钮的时候发现根本不起作用，就算设置了mode属性但是on和off的过渡依旧是同时开始的，也就是并没有起作用
在研究了半天后，结合文档前面的多元素的过渡终于解决了问题。
先给出mode属性起作用的代码
<style type="text/css">
.on-enter-active{
transition: 2s ease;
}
.on-leave-active{
transition: 3s ease;
}
.on-enter,.on-leave-to{
opacity: 0;
}
</style>
</head>
<body>
<div id="test">
<transition name="on" mode="out-in"><!--mode只适用于一个transition内的同标签切换-->
<button v-if="show" key="but1">on</button>
<button v-else key="but2">off</button><!--key为了防止只是修改内容不重新渲染-->
</transition> <button style="margin-top: 100px;" @click="show=!show">切换</button>
</div> <script src="vue.js"></script>
<script>
new Vue({
el:'#test',
data:{
show:true
}
})
</script>
原来文档中的过渡模式是建立在多组件切换的基础上的，也就是动态组件切换，并且当两个被切换的元素是同种标签的内容时（比如这里都是button），需要给每个元素加key用以区分元素。
否则由于Vue机制的原因，为了性能会使用同一个元素。也就是说你切换时并不会更换掉整个元素，而是替换掉该元素中的内容的值，以此来切换，所以在这里需要添加key
Vue过渡mode属性踩坑的更多相关文章
- vue项目移植tinymce踩坑
转载:https://segmentfault.com/a/1190000012791569?utm_source=tag-newest 2019-2-18 貌似这篇文章帮了大家一些小忙最近tinym ...
- vue中的小踩坑（01）
前言: 昨天算是使用vue2.0+element-ui做了一点小小的页面,可是源于其中遇到的问题,特地整理一下,以防自己还有其他的小伙伴们继续踩坑. 过程: 1.不知道大家有没有注意到 ...
- Vue.js provide / inject 踩坑
最近学习JavaScript,并且使用vuejs,第一次使用依赖注入,结果踩坑,差点把屏幕摔了..始终获取不到如组件的属性,provide中的this对象始终是子组件的this对象 慢慢也摸索到了些v ...
- vue.js使用typescript踩坑记
最近在把https://github.com/renrenio/renren-fast-vue这个项目转为typescript,在此记录一下遇到的小坑 name坑:属性该怎么给? 声明文件坑:如何解决 ...
- Vue路由history模式踩坑记录：nginx配置解决404问题
问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使 ...
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
- Vue + TypeScript 踩坑总结
vue 和 TypeScript 结合的情况下,很多写法和我们平时的写法都不太一样,这里总结我项目开发过程中遇到的问题和问题的解决方案 有些问题可能还没解决,欢迎各位大佬给与提点. 另外,使用本文前可 ...
- 记录自己的踩坑第一天 | CSS:vertical-align 属性
前言 最近老师让大家单独写前后端分离项目,真是大家卷完后端,一起去卷前端了.(我以前都是主要负责后端,处于只大致看的懂的级别,说多了都是泪啊). 真是处于一边学一边写的状态,基本就是每天早上看上两~三 ...
- vue+ vue-router + webpack 踩坑之旅
说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案 老司机可以忽略下面的内容了 1)起因 考虑到数据分离的问题 因为server是express搭的 自然少 ...
随机推荐
- springmvc webservlet 加redis 订阅消息
由于项目内请求的数据需要 等待设备处理完毕后返回才能得到.请求命令返回的是发送成功的包,而不是设备处理的包,所以需要请求等待.. 方式一:项目中 添加了redis作为一个缓存, webservlet ...
- clean-room 洁净室软件工程
众所周知,软件工程的主要目的是提高软件的开发效率和软件质量.近年来发展起来的洁净室软件工程(cleanroom software engineering)提出了用统计的质量控制方法管理软件 ...
- 快速排序的两种实现方法（js）
快速排序的基本思想:通过一趟排序,将待排记录分割成独立的两部分,其中一部分记录的关键字均比另外一部分记录的关键字小,则可分别对着两部分记录继续进行排序,以达到整个序列有序的目的.----------- ...
- matplotlib 绘图报错 RuntimeError: Invalid DISPLAY variable
ssh 远程登录 Linux 服务器使用 matplotlib.pyplot 绘图时报错 原因: matplotlib 在 windows 下的默认 backend 是 TkAgg:在 Linux 下 ...
- powershell复制文件夹的文件
function CCopy($folder_a_path,$folder_b_path){ #遍历源文件夹下所有文件 $folders_a = gci $folder_a_path -Recurse ...
- Unity3D 在Update中不要过多地修改Transform 信息
前文说到碰撞检测时候,不要在Update内部尝试移动GameObject 来检查碰撞检测,这样是徒劳无功.但是 说到 因为你移动的过程中其实并没有将实际的移动位置更新到物理引擎,只是做了个缓存而已, ...
- JS獲取URL的參數
function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*) ...
- Spring Beans和依赖注入
您可以自由地使用任何标准的Spring框架技术来定义您的bean及其注入的依赖项.为简单起见,我们经常发现使用@ComponentScan(找到您的bean)和使用@Autowired(做构造函数注入 ...
- 格式代码出现两次oracle
报ORA-01810:格式代码出现两次 原因是Java中的年月日和Oracle中的年月日表示形式不一样 oracle用MI来代表分钟,而不是java中的mm
- Maven学习 六 pom.xml文件
java jar包的搜索网址:http://mvnrepository.com/ pom作为项目对象模型.通过xml表示maven项目,使用pom.xml来实现.主要描述了项目:包括配置文件:开发者需 ...