Vue学习笔记进阶篇——多元素及多组件过渡
本文为转载,原文:Vue学习笔记进阶篇——多元素及多组件过渡
多元素的过渡
对于原生标签可以使用 v-if/v-else
.但是有一点需要注意:
当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们,否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要,给在
<transition>
组件中的多个元素设置 key 是一个更好的实践。
示例:
<transition><button v-if="isEditing" key="save">Save</button><button v-else key="edit">Edit</button> </transition>
在一些场景中,也可以给通过给同一个元素的 key
特性设置不同的状态来代替v-if
和 v-else
,上面的例子可以重写为:
<transition><button v-bind:key="isEditing">{{ isEditing ? 'Save' : 'Edit' }}</button> </transition>
使用多个 v-if
的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡。 例如:
<transition><button v-if="docState === 'saved'" key="saved">Edit</button><button v-if="docState === 'edited'" key="edited">Save</button><button v-if="docState === 'editing'" key="editing">Cancel</button> </transition>
可以重写为:
<transition><button v-bind:key="docState">{{ buttonMessage }}</button> </transition> computed: {buttonMessage: function () {switch (this.docState) {case 'saved': return 'Edit'case 'edited': return 'Save'case 'editing': return 'Cancel'}} }
过渡模式
在元素之间的过渡中,还存在一个问题:两个元素都被重绘了,一个离开过渡的时候另一个开始进入过渡。这是 <transition>
的默认行为 - 进入和离开同时发生。
有一种最原始的解决方法就是,在元素绝对定位
在彼此之上的时候运行正常。
还有一种方法就是使用Vue 提供的过渡模式
.
in-out
: 新元素先进行过渡,完成之后当前元素过渡离开。
out-in
: 当前元素先进行过渡,完成之后新元素过渡进入。
用 out-in
重写之前的开关按钮过渡:
<transition name="fade" mode="out-in"><!-- ... the buttons ... --> </transition>
多元素过渡的例子
v-if和v-else的绝对定位实例
<div class="my-div" id="app"><transition name="fade"><button class="btn" :key="show" @click="show=!show">{{show ? 'on' : 'off'}}</button><!--<button key="on" v-if="show" class="btn" @click="show = !show">on</button>--><!--<button key="off" v-else class="btn" @click="show = !show">off</button>--></transition> </div>
.my-div{position: relative;}.btn{position: absolute;left: 30px;top: 10px;}.fade-enter-active, .fade-leave-active{transition: opacity .5s;}.fade-enter, .fade-leave-to{opacity: 0;}
new Vue({el:'#app',data:{show : true} })
多个v-if的例子
<div class="my-div" id="app"><transition name="fade"><button class="btn" :key="key" >{{btnContent}}</button></transition> </div>
.my-div{position: relative;}.btn{position: absolute;left: 30px;top: 10px;}.fade-enter-active, .fade-leave-active{transition: opacity .5s;}.fade-enter, .fade-leave-to{opacity: 0;}
var app = new Vue({el:'#app',data:{key:'add'},computed:{btnContent:function () {switch (this.key){case 'add' : return 'Add'case 'edit' : return 'Edit'case 'delete' : return 'Delete'}}} })
这里我没有做对app.key的值的控制,所以想看过渡效果的话,可以在控制台里修改app.key的值。
过渡模式的例子
<div id="app"><transition name="fade" mode="out-in"><button :key="show" @click="show=!show">{{show ? 'on' : 'off'}}</button></transition> </div>
.fade-enter-active, .fade-leave-active{transition: opacity .5s;}.fade-enter, .fade-leave-to{opacity: 0;}
new Vue({el:'#app',data:{show : true} })
多组件过渡
多个组件的过渡简单很多 - 我们不需要使用 key 特性。相反,我们只需要使用动态组件,情况一下例子:
<div id="app"><transition name="fade" mode="out-in"><component :is="view"></component></transition> </div>
.fade-enter-active, .fade-leave-active{transition: opacity .5s;}.fade-enter, .fade-leave-to{opacity: 0;}
var app = new Vue({el:'#app',data:{view:'v-a'},components:{'v-a':{template:'<div> component a </div>'},'v-b':{template:'<div> component b </div>'},} })
在控制台中修改app.view的值便可看到过渡效果。
以上示例中的过渡动画,都可以自己定义,也可以使用上一节提到的自定义class已经钩子函数等,在这里就不做详细介绍了。
完
本文为转载,转载请注明出处
上一节:Vue学习笔记进阶篇——单元素过度
返回目录
下一节:Vue学习笔记进阶篇——列表过渡及其他
转载于:https://www.cnblogs.com/ChainZhang/p/7182609.html
Vue学习笔记进阶篇——多元素及多组件过渡相关推荐
- Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数 基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
- vue-resource post php,Vue学习笔记进阶篇——vue-resource安装及使用
简介 vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到 ...
- Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
- PHP学习笔记 - 进阶篇(7)
PHP学习笔记 - 进阶篇(7) 文件操作 读取文件内容 PHP具有丰富的文件操作函数,最简单的读取文件的函数为file_get_contents,可以将整个文件全部读取到一个字符串中. $conte ...
- 后端小白的VUE入门笔记, 进阶篇
使用 vue-cli( 脚手架) 搭建项目 基于vue-cli 创建一个模板项目 通过 npm root -g 可以查看vue全局安装目录,进而知道自己有没有安装vue-cli如果没有安装的话,使用如 ...
- vue 学习笔记—路由篇
一.关于三种路由 动态路由 就是path:good/:ops 这种 用 $route.params接收 <router-link>是用来跳转 <router-view> ...
- DDD学习笔记 - 进阶篇(Ⅱ)
09 | 中台:数字转型后到底应该共享什么? 课程链接:https://time.geekbang.org/column/article/159580 中台是数字化转型的一个热门话题.继阿里提出中台概 ...
- 极客HTTP协议学习笔记破冰篇(1-7)
极客HTTP协议学习笔记破冰篇(1-7) 前言 各篇章笔记链接 一.学习笔记 1.HTTP的前世今生 2.HTTP是什么 3.与HTTP相关的各种概念(上) 4.与HTTP相关的各种概念(下) 5.常 ...
- Vue学习笔记(三)Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录 一.参考资料 二.运行环境 三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名 四.GitHu ...
最新文章
- 0基础玩转CV的利器绝了,还送万元礼金,机不可失!
- 关于.h .cpp和inline的讨论
- ppt转换成pdf转换器免费版
- 【蓝桥杯-第五届】 啤酒和饮料
- java:十进制转十六进制
- 约束rmq_差分约束
- RuntimeError: Cannot run the event loop while another loop is running
- 17-Flutter移动电商实战-首页_楼层区域的编写
- Flask第一篇——URL详解
- 为什么谐振时电抗为0_高压直流输电(LCC-HVDC 和 MMC-HVDC)中平波电抗器的作用和选择策略...
- php中unset函数是在哪一章_PHP unset函数好奇怪 -
- 猫眼(门镜)中的光学
- [Hadoop]Hive r0.9.0中文文档(二)之联表查询Join
- 387. First Unique Character in a String - String
- 游戏美术资源网站推荐
- php 数组处理方法,关于PHP数组问题的处理方法
- 表白套路计算机公式,高级表白密码我喜欢你公式 套路喜欢的人
- 如何做好国产三维CAD软件的研发?
- PostgreSQL之如何进行SQL优化?
- 更改安卓系统开机画面
热门文章
- Jquery和angularjs获取check框选中的值小技巧
- mysql 索引建立标准_mysql索引规范
- 鸿蒙系统可以安装teams吗,鸿蒙致命弱点被曝光!不能装这个软件,80%用户将望而却步!...
- java 百度地图 经纬度_Java百度地图经纬度纠偏
- python 3.6.3自带的编程调试环境包括了_序章:资料预处理(python3.6 可用fortran unformatted sequencial data读取模块)...
- 光流(二)--光流算法
- Python_骑士游历问题
- C语言:编写一个函数,计算二维数组中的最大元素,数组以指针的方式传递
- larval 操作mysql数据库_laravel的数据库操作(三种)
- 从复杂指令系统到精简指令系统