vue学习07--进入/离开&列表过渡
2017-11-03 11:36
731 查看
1、CSS过渡
过渡的类名在进入/离开的过渡中,会有 6 个 class 切换。
v-enter:定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
v-enter-active:定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除),在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。
v-leave-active:定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除),在 transition/animation 完成之后移除。
实例1:
<style> .fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ { opacity: 0 } .fade-enter-to{ color: red; } </style>
<div id="demo"> <button @click="change">改变</button> <transition name="fade"> <p v-if="seen">show</p> </transition> </div> <script type="text/javascript"> var demo = new Vue({ el:"#demo", data:{ seen:true }, methods:{ change:function(){ this.seen = !this.seen; } } }) </script>
实例2:
<style> /* 可以设置不同的进入和离开动画 */ /* 设置持续时间和动画函数 */ .slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active for below version 2.1.8 */ { transform: translateX(10px); opacity: 0; } </style>
<div id="demo1"> <button @click="seen1=!seen1">transition</button> <transition name="slide-fade"> <p v-if="seen1">hello</p> </transition> </div> <script type="text/javascript"> var demo1 = new Vue({ el:"#demo1", data:{ seen1:true } }) </script>
2、CSS动画
CSS 动画用法同 CSS 过渡,区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除,而是在 animationend 事件触发时删除。相关文章推荐
- [Vue][V-move]列表进入/离开的平滑过渡,官方教程学习释疑
- 详解Vue学习笔记进阶篇之列表过渡及其他
- Vue.js学习笔记:过渡效果(含列表过渡)
- ASP.NET学习笔记五之表格&列表
- Vue 进入/离开动画
- vue学习总结:响应式系统&vue实例
- vue transition-group 列表过渡
- HTML&CSS基础学习笔记1.12-无序列表
- vue学习第11天,过渡 动画 过渡模式
- Vue.js学习 Item7 -- 条件渲染与列表渲染
- 僵尸进程学习 & 进程状态列表 & Linux信号学习
- vue过渡动画效果学习总结
- Vue.js学习 Item10 – 过渡与动画
- Vue学习笔记进阶篇之过渡状态详解
- vue学习第9天,过渡 动画
- Python学习--识别“字符串&字典&列表&元组“
- Hibernate 学习笔记07 --集合映射_&_继承映射
- Vue列表过渡
- Vue深度学习(5)-过渡效果
- vue视频学习笔记07