VUE—— transition(过渡&动画)的简单使用
2018-06-29 16:41
239 查看
对要使用动画的组件或者模块包上一层transition标签,
<transition name="fade"> <p v-if="show">hello</p> </transition>name是自己命名的class的名称,用来写动画样式,如果不写name 则默认是v
对应样式名称如下:写样式的时候,v的地方要改fade.
如:
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
对于transition的其他属性,请参照:点击打开链接
class 具体含义如下:
v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。
拓展:结合animate.css使用
首先要下载animate的库,请在 animate.css 网站上自行下载然后 在main.js中引用 ,请依照自己的路径
import "./common/animate.css";
组件部分:<transition mode="out-in" name="custom" enter-active-class="animated rollIn" leave-active-class="animated rollOut"> <div class="box" v-if="show">Hello world</div> </transition>
运行,泽科看到东湖效果,更多animate效果,请在animate网站上自行选用:点击打开链接
阅读更多
相关文章推荐
- vue2实现过渡动画,transition的简单使用
- 详解vue2.0 transition 多个元素嵌套使用过渡
- vue 简单动画过渡
- Activity 切换时的动画---overridePendingTransition简单使用
- 学习前端js核心Vue 之 directives(自定义命令) transition (过渡动画 js) 个人备忘笔记
- vue2.0使用animate.css动画,transition&transition-group
- 场景过渡动画(Scene Transition)-简单使用
- [原]浅谈vue过渡动画,简单易懂
- vue2.0 transition 多个元素嵌套使用过渡
- Vue动画--同时使用过渡和动画
- (六)vue开发 - transition之页面切换过渡动画
- 使用vue的transition完成滑动过渡的示例代码
- CATransition动画的简单使用
- 简单图片3D变换动画的制作(使用transition、transform)
- Activity过渡动画(overridePendingtransition()的使用)
- vue2.0 中使用transition实现动画效果使用心得
- Vue2.0过渡动画效果transition
- vue组件切换时使用过渡(transition)时应该注意的一些事项
- 使用 vue-router 切换页面时怎么设置过渡动画
- 简单谈谈vue的过渡动画(推荐)