多元素过渡

当有相同标签名的元素切换时, 需要通过key attribute 设置唯一的值来标记以让Vue区分它们,否则vue为了效率只会替换相同标签内部的内容;
过渡模式 mode
- in-out: 新元素先进行过渡, 完成之后当前元素过渡离开;
- out-in: 当前元素先进行过渡, 完成之后新元素过渡进入;

eg

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>多元素的过渡</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><style type="text/css">/* 过渡样式fade-enter-active进入 ; fade-leave-active离开*/.fade-enter-active, .fade-leave-active {transition: opacity .5s;}/* fade-enter进入  fade-leave-to离开  */.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {opacity: 0;}</style></head><body><div id="app"><button type="button" @click="isShow=!isShow">点击</button><!--  标签transition  --><transition name="fade" mode="out-in" @before-enter="beforeEnter" @after-leave="afterLeave"><p v-if="isShow" key="1"> hello Vue </p><p v-else="isShow" key="2"> hello lnmp </p></transition></div></body>
</html>
<script type="text/javascript">        var vm = new Vue({el:'#app',data:{   isShow:true},methods:{// 进来之前的操作beforeEnter:function(){console.log('beforeEnter')},// 离开之后的操作afterLeave:function(){console.log('afterLeave')                }}      });
</script>

多元素过渡理解和一点透相关推荐

深入理解Android L新特性之页面内容amp;共享元素过渡动画
今天我们来聊聊Android L(5.0)引入的新特性:页面内容过渡动画和页面共享动画,这两个特性都是基于我们前面已经说过的Transition动画,如果你对Transition动画不太属性,请先看我 ...
[html] 说下你对组件、模块、元素的理解，它们的区别在哪里？
[html] 说下你对组件.模块.元素的理解,它们的区别在哪里? 元素:元素是网页的一部分,在 XML 和 HTML 中,一个元素可以包含一个数据详情或者是一块文本或者是一张照片,亦或是什么也不包含. ...
android共享元素动画_Android共享元素过渡动画
android共享元素动画 In this tutorial we'll implement a different kind of animation transition namely Share ...
HTML5 CSS3提高 11-01 新增标签及属性表单多媒体结构伪类伪元素过渡小米log jd进度条
HTML5新特性 1.语义化标签 (★★) <header> 头部标签 <nav> 导航标签 <article> 内容标签 <section> 定义文档 ...
多个元素过渡---v-if、v-else、v-bind
不相同标签名元素可以使用v-if和v-else来进行过渡,下面通过案例演示不同标签名元素的过渡. (transition)只能对一个标签进行过渡通过判断iteams有没有值来进行选择性过渡标签元素 ...
html5块元素怎么理解,HTML5-块级元素
HTML 5 还增加了一些纯语义性的块级元素: aside figure dialog 我在文章和书中一直使用前两个元素.第三个元素我不经常用,它主要用于书面文本. aside aside 元素代表说 ...
关于多重背包理解的一点思考和拨乱反正
题目如下: 对于每一组样例,给你六种玻璃球,每种有着不同的价值,现在问你,你能否在不拆分同一颗玻璃球价值的同时分成价值相同的两份? #include<stdio.h> #include&l ...
网站访问过程理解（一点记录）
一个普通网站访问的过程简单概括一下,对于我们普通的网站访问,涉及到的技术就是: 用户操作浏览器访问,浏览器向服务器发出一个 HTTP 请求: 服务器接收到 HTTP 请求,Web Server 进行 ...
SQL优化理解的一点方法
2019独角兽企业重金招聘Python工程师标准>>> 1.尽量避免使用select *,返回无用的字段会降低查询效率.如下: SELECT * FROM table 优化方式:使用 ...
对float浮动的我的理解，形象生动一点
大多数官方的对float的定义和用法是这样写的: float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级 ...

多元素过渡理解和一点透

多元素过渡

eg

多元素过渡理解和一点透相关推荐

最新文章

热门文章