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搭的 自然少 ...
随机推荐
- 2. 2A03简介
2A03简介 1.CPU 1.1 内部寄存器 1.累加寄存器A(Accumulator):8位寄存器,用于同算术逻辑单元(ALU)共同完成各种算术逻辑运算,它既为ALU提供原始操作数又担任存放ALU运 ...
- 4.7做作业时发现，内联元素设置宽高背景以后正常不显示，但是设置了position：absolute；以后就可以显示了。起到了和display：block；一样的效果。然后查了一下知道了。
如果内联元素定位属性设置为:absolate,元素脱离文档,即使a元素中没有内容,设置的背景依然会显示!
- python AES加密 ECB PKCS5
class AesEbc16: # 按块的大小, 一块一块的加密, 明文和密文长度一样 def __init__(self): self.key = b"123qweqqqwerqwer& ...
- Lonsdor K518ISE programs 2005 Ford Focus key in two minutes
A quick demonstration of Lonsdor K518ISE programming key for 2005 Ford Focus in two minutes. And for ...
- Scrapy运行ImportError: No module named win32api错误
windows系统上出现这个问题的解决需要安装Py32Win模块,更方便的做法是: pip install pypiwin32
- maven 在clean package时，出现：找不到符号 [ERROR] 符号： 方法 sqlDdlFilter(java.lang.String) 解决办法
另一个项目中增加了,sqlDdlFilter 在调用的项目中clean package时,出现 找不到符号[ERROR] 符号: 方法 sqlDdlFilter(java.lang.String) 原 ...
- 使用Python完成排序（快排法、归并法）
class Sort(object): def quick_sort(self, ls): self.quick_sort_helper(ls, 0, len(ls) - 1) return ls d ...
- 从零开始学java （五）接口与内部类
接口,是描述类具有什么样的功能,而不是给出每个功能的实现.一个类可以implements多个接口...接口中可以含有 变量和方法.但是要注意, 接口中的变量会被隐式地指定为public static ...
- day31并发
以后你为之奋斗的两点: 提高cpu的利用率 提高用户的体验 1.纯概念/纯方法 操作系统的发展历程 #主要的人机矛盾是什么:CPU的使用率 #输入\输出数据和CPU计算没有关系 #操作系统是怎么进化 ...
- contaner
what Container技术是直接将一个应用程序所需的相关程序代码.函式库.环境配置文件都打包起来建立沙盒执行环境 history 早在1982年,Unix系统内建的chroot机制也是一种Con ...