vue 路由过渡动效
<router-view>
是基本的动态组件,所以我们可以用 <transition>
组件给它添加一些过渡效果:
<transition name="slide-left" mode="out-in">
<router-view />
</transition>
过渡的类名
在进入/离开的过渡中,会有 6 个 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
被删除),在过渡/动画完成之后移除。
对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 <transition>
,则 v-
是这些类名的默认前缀。如果你使用了 <transition name="my-transition">
,那么 v-enter
会替换为 my-transition-enter
。
Props:
name
- string,用于自动生成 CSS 过渡类名。例如:name: 'fade'
将自动拓展为.fade-enter
,.fade-enter-active
等。默认类名为"v"
appear
- boolean,是否在初始渲染时使用过渡。默认为false
。css
- boolean,是否使用 CSS 过渡类。默认为true
。如果设置为false
,将只通过组件事件触发注册的 JavaScript 钩子。type
- string,指定过渡事件类型,侦听过渡何时结束。有效值为"transition"
和"animation"
。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。mode
- string,控制离开/进入过渡的时间序列。有效的模式有"out-in"
和"in-out"
;默认同时进行。duration
- number | {enter
: number,leave
: number } 指定过渡的持续时间。默认情况下,Vue 会等待过渡所在根元素的第一个transitionend
或animationend
事件。
过渡模式mode:
1.in-out:新元素先进入过渡,完成之后当前元素过渡离开。
2.out-in:当前元素先进行过渡离开,离开完成后新元素过渡进入。
例子:
.slide-left-enter {
opacity: 0;
-webkit-transform: translate(30px, 0);
transform: translate(30px, 0);
}
.slide-left-enter-active{
transition: all .5s ease;
}
.slide-left-leave-to{
opacity: 0;
-webkit-transform: translate(-30px, 0);
transform: translate(-30px, 0);
}
.slide-left-leave-active {
transition: all .5s ease;
}
最新文章
- hasOwnProperty 递归 简单回调 链式调用
- PRML读书会第九章 Mixture Models and EM(Kmeans,混合高斯模型,Expectation Maximization)
- ORACLE恢复神器之ODU/AUL/DUL
- LeetCode:Longest Substring Without Repeating Characters(最长不重复子串)
- java编程之:Unsafe类
- Android 网络流量监听开源项目-ConnectionClass源码分析
- 凸包(hd1392)
- 在vmware里面免费安装纯净的xp虚拟机
- KVM嵌套虚拟化nested之CPU透传
- js入门关于函数
- Python os.removedirs() 和shutil.rmtree() 用于删除文件夹
- 如何查看Firefox中保存的登录密码
- C++ 拷贝构造函数和赋值构造函数
- struts中指定编码(使用Filter后仍然乱码)
- Mybatis常见面试题 一
- shell模拟“多线程”
- C#导出Excel按照指定格式设置单元格属性值
- January 04 2017 Week 1st Wednesday
- 网众远程修改ip、dns
- June 09th 2017 Week 23rd Friday