vue2.0中css过渡动画总结
来源:互联网 发布:富二代 知乎 编辑:程序博客网 时间:2024/06/08 12:09
vue2.0中css过渡动画总结
vue.2.0中的过渡动画利用自身的transition组件实现,有四种情形可以实现过渡效果
- 利用v-if渲染元素时
- 利用v-show展示或者隐藏元素时应用过渡生效
- 动态组件(把几个组件挂载到一个父节点上,在父节点绑定变量来决定显示哪个子组件)
- 组件根节点
过渡有两种总的状态:即enter(过渡开始)和leave(过渡结束)
这两中状态再细分,可分出6种状态,对应6个类名:
v-enter
开始过渡。在元素被插入(也就是数据控制dom显示)时生效,在下一个帧移除。可以定义过渡的开始状态。
v-enter-active
定义过渡的状态。在元素整个过渡过程中(v-enter的下一个阶段)作用,在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
v-enter-to
(2.1.8版及以上) 开始过渡的最后一个状态,在v-enter-active之后执行。在元素被插入一帧后生效(于此同时 v-enter 被删除),在 transition/animation 完成之后移除。可以定义过渡的最终状态。
v-leave
过渡的最终状态开始消失的第一个阶段,在离开过渡被触发时生效,在下一个帧移除。
v-leave-active
定义过渡离开的中间状态。在元素整个过渡离开过程中作用,在离开过渡被触发后立即生效(v-leave的下一个阶段),在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
v-leave-to
定义过渡离开的最后状态。对于切换(toggle)效果来说,就是回到最开始的状态。
各个状态的关系以及什么阶段定义何种状态
示例
控制元素的滑入与滑出,例如:
DOM结构,要在transition组件上添加name属性,并在css中使用name的属性值替代以上v-状态种的v作为类名
<transition name="slide"> <div class="food" v-show="showFlag" @click="hide"> <div class="food-content"> <div class="imang-header"> <img :src="food.image" > </div> </div> </div> </transition>
css样式:使用的是stylus语法
.food position :fixed left:0 top:0 bottom: 48px z-index:30 width :100% background :#fff /*定义元素最终移动到的位置,以及移动到此位置需要的时间*/ .slide-enter-active transition: all .5s ease transform:translate3d(0,0,0) /*定义元素从什么位置离开,以及离开岛指定位置所需的时间*/ .slide-leave-active transition: all .5s ease transform:translate3d(0,0,0) /*定义元素从100%的位置移入到0,过渡结束后再从0回到100%的位置*/ .slide-enter,.slide-leave-to transform:translate3d(100%,0,0)
以上是vue2.0过渡效果的简单用法,如有错误,欢迎拍砖指正~~
- vue2.0中css过渡动画总结
- Vue2.0过渡动画效果transition
- vue2 过渡效果总结
- vue2 过渡效果总结
- CSS动画-过渡
- css动画和过渡
- CSS 动画 过渡
- css动画之过渡
- Vue2.0使用总结中......
- css过渡和动画初学
- vue2.0使用animate.css动画,transition&transition-group
- CSS基础-29CSS动画-过渡
- html css学习笔记-过渡,动画
- CSS-过渡效果和动画效果
- CSS过渡、动画、变换,综合实例
- Vue2 ( 3 ) 过渡
- vue2中的过渡效果
- vue2 中的过渡效果
- OpenCV中重要函数
- linux命令(shell)
- 第一篇博客
- 解决servlet中文乱码问题及get、post请求方式的讲解
- NIO学习笔记——选择器(selectors)
- vue2.0中css过渡动画总结
- 编程小技巧(自我总结,实时更新)
- 循环
- JSP属性范围
- anyka cloud39e_v1.0_patch1 环境配置以及编译
- Error:java: Compilation failed: internal java compiler error
- (转)韩同利:明年A股会有一个牛市
- JAVA高性能高并发解决思路
- (2)奇偶排序