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搭的 自然少 ...
随机推荐
- windows -休眠
查询服务器执行的睡眠状态 powercfg -a 开始休眠方法:手工键入如下命令: powercfg -hibernate on 命令执行之后立即就可以生效,无需要重新启动系统,再次执行“powerc ...
- c#Dapper mysql按时间段查询和过滤
#endregion /// <summary> /// 根据条件获取集合 /// </summary> /// <param name="id"&g ...
- Disk
一.简介 二.其他 1)Disk I/O
- SQL Server数据库的兼容级别
SQL Server 是Microsoft 公司推出的关系型数据库管理系统.具有使用方便可伸缩性好与相关软件集成程度高等优点,可跨越从运行Microsoft Windows 98 的膝上型电脑到运行M ...
- Eclipse Maven: Cannot change version of project facet Dynamic web to 3.0 的解决方法
在 Eclipse 中创建 Maven web 项目的时候使用 maven-artchetype-webapp 骨架,但是这个 catalog 比较老,用的 servlet 还是 2.3 在 Proj ...
- php 随机生成ip
#随机生成IP 中国区 function randip(){ $ip_1 = -1; $ip_2 = -1; $ip_3 = rand(0,255); $ip_4 = rand(0,255); $ip ...
- 博客1--tensorflow的图像基本处理操作
话不多,具体内容在开源中国里我的博客:https://my.oschina.net/u/3770644 代码: #!/usr/bin/env python# -*- coding:utf-8 -*-# ...
- Linux 网络编程 入门-常用函数
网络连接无外乎服务器和客户端两方面的编程. 对于服务器大致的流程是:1---调用socket函数创建套接字 2---调用bind函数分配IP地址和端口号 3---调用listsen函数将套接字转为可接 ...
- Sublime Text 3安装emmet(ZenCoding)
1.安装 Package Ctrol: 使用 ctrl + - 打开控制台,输入以下代码 import urllib.request,os; pf = 'Package Control.sublime ...
- 地磁应用中的低功耗无线数传模块xbee PRO S2C
地球上每一个地理坐标点,在一段时间内磁场强度是恒定的,当车辆这种铁磁物质经过这个点时,对这个点的磁场强度产生一个连续的扰动,通过磁传感器采样数据与初始采样数据(该点的地球磁场值)进行对比,其差值为车辆 ...