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搭的 自然少 ...
随机推荐
- 多个表左联，要返回全部的结果，解决不能用where的问题
qb.leftJoin('info_student', 'grouping_class_student.studentId', 'info_student.id'); qb.leftJoin('gro ...
- 安装CentOS 7 的yum 到 Radhat 7上，使其可以获取资源
镜像资源: 1. http://mirrors.163.com/ 2. https://opsx.alibaba.com/mirror 从上列镜像资源下载如下rpm软件包 -rw-r--r--. 1 ...
- python rsa 加密
rsa 非对称加密, 公钥加密, 私钥解密, 有公钥无法推导出私钥, 私钥保密 import rsa n = 1024 # n 越大生成公钥, 秘钥及加密解密所需时间就越长 key = rsa.new ...
- [DP][NOIP2015]子串
子串 题目描述 有两个仅包含小写英文字母的字符串 A 和 B. 现在要从字符串 A 中取出 k 个 互不重叠 的非空子串, 然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一个新的 ...
- Python3 单下划线_双下划线__开头
Python 中,下划线对解释器有特殊的含义,而且是内建标识符所使用的符号,使用时要多加留意. 在 Python3 的面向对象中,双下划线开头的变量和方法表名为私有变量和私有方法. __private ...
- abp 设置默认语言为中文
abp 设置默认语言为中文 abp的默认语言设置,存放于数据库表AbpSettings中,这样配置可使默认语言为中文: name: Abp.Localization.DefaultLanguageNa ...
- IntelliJ隐藏特定后缀文件
preference-
- xbee PRO S2C的多固件烧写
XBee and XBee-PRO ZB 嵌入式射频模块是与ZigBee/IEEE 802.15.4兼容的解决方案,可以满足低成本低功耗无线传感网络的特殊需求.该模块易于使用,极低的功耗,以及提供设备 ...
- 解决使用Mybatis 传入多参数使用map封装遇到的 “坑”问题
好久没来写些东西了,今天 我分享一下自己遇到的一个“小 坑”,这也许对您来说不是个问题,但是我还是希望对没有遇到过这类问题的朋友给个小小的帮助吧 是这样的,需求:需要实现根据多条件 且分页展示数据 1 ...
- cpu的工作原理