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搭的 自然少 ...
随机推荐
- unity fbx 导出动画
public class ActionConvetTool { [MenuItem("ActionTools/动作处理")] public static void ActionCo ...
- Redis：MySQL算老几？
原创: 码农翻身刘欣 前言:上一篇<MySQL:缓存算什么东西?>里挖了一个坑,也有很多人说没看过瘾,今天接着写,把坑填上,不过得把视角换一下,让Redis上台发言. 我知道MySQL看我 ...
- vue自定义滚动条
参照element-ui的el-scroll自己实现了一个自定义组件,代码如下: <template> <div class="c-scroll-box" ref ...
- 归并排序之python
想更好的了解归并排序, 需先了解, 将两个有序列表, 组成一个有序列表 有两个列表 l1 = [1, 3, 5, 7] l2 = [2, 4, 6] 需要将 l1 和 l2 组成一个 有序大列表 ...
- tomcat设置开机自动启动
windows下: 1 命令cmd 进入 磁盘: 回车 2 tomcat\bin目录 回车 3 service.bat install (注:tomcat一定要有service.bat ...
- 使用SQL创建唯一索引
使用sql语句创建唯一索引,格式如下: create unique index 索引名 on 表名(列名1,列名2……) 示例:在表GoodsMade_Labour的SID列上创建唯一索引IX_Goo ...
- Vmware Workstation实现CentOS6.10_x64 下ORACLE RAC 11.2.0.4的搭建
想必大家在学习ORACLE 11g时,都想搭建一个RAC的实验环境.在搭建RAC实验环境时,会碰到诸如IP怎么规划.虚拟机环境下怎么共享磁盘.ASM磁盘创建,以及安装过程中会遇到这样那样的问题.搭建一 ...
- mysql 外网访问
--修改用户Root 可以外网访问 update user set host='%' where user='root'; --查询修改结果 select user,host from user; - ...
- java34
局部内部类:定义在方法中的类 -1局部类中可引用局部变量(定义在方法中的变量),但是局部变量必须已经初始化, 因为局部变量前默认带着final. 2.局部内部类的东西只能在定义的方法中使用(在方法中创 ...
- e.stopPropagation()兼容性处理
使用jquery库,e.stopPropagation()兼容所有. 原生的就要这么写 function stopPropagation(e){ e=window.event||e; if(docum ...