Vue2路由动画效果的实现代码
这篇文章主要讲的是路由切换的时候动画效果的实现，可以根据不同的路径去改变动画的效果，以下就是源码，可供参考：
<template>
<div id="app">
<transition :name="transitionName">
<router-view class="child-view"></router-view>
</transition>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
transitionName: 'slide-left'
}
},
mounted () {
},
//监听路由的路径，可以通过不同的路径去选择不同的切换效果
watch: {
'$route' (to, from) {
if(to.path == '/'){
this.transitionName = 'slide-right';
}else{
this.transitionName = 'slide-left';
}
}
}
}
</script>
<style>
.child-view {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all .5s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(30px, 0);
transform: translate(30px, 0);
}
.slide-left-leave-active, .slide-right-enter {
opacity: 0;
-webkit-transform: translate(-30px, 0);
transform: translate(-30px, 0);
}
</style>
路由的api链接在这，详细的可以去看这https://router.vuejs.org/zh-cn/advanced/transitions.html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
在这里，我们将动态画面简称为动画（animation）。正如动画片的原理一样，动画的本质是利用了人眼的视觉暂留特性，快速地变换画面，从而产生物体在运动的假象。而对于Three.js程序而言，动画的实现也是通过在每秒中多次重绘画面实现的。 为了衡量画面切换速度，引入了每秒帧数FPS（Frames Per Second）的概念，是指每秒画面重绘的次数。FPS越大，则动画效果越平滑，当FPS小于20时，
-
本文向大家介绍js+html5实现的自由落体运动效果代码，包括了js+html5实现的自由落体运动效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js+html5实现的自由落体运动效果。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： 更多关于JavaScript运动相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》 希望本文所述对大
-
本文向大家介绍IOS等待时动画效果的实现，包括了IOS等待时动画效果的实现的使用技巧和注意事项，需要的朋友参考一下 查询时间或长或短，为了提升用户体验，目前用的比较多的手段之一就是查询等待时添加一个动态等待效果。当我们在请求网络时加载页面时有个动作效果，效果图如下： 源代码可以网上找开源项目Coding.net，上面的效果原理为两张图片组合，外面那个则为动画转动，里面的图标则是透明度的变化；主要代
-
本文向大家介绍AngularJS中实现动画效果的方法，包括了AngularJS中实现动画效果的方法的使用技巧和注意事项，需要的朋友参考一下 AngularJS 动画 AngularJS 提供了动画效果，可以配合 CSS 使用。 AngularJS 使用动画需要引入 angular-animate.min.js 库。 <script src="http://apps.bdimg.com/libs/a
-
本文向大家介绍iOS 水波纹动画的实现效果，包括了iOS 水波纹动画的实现效果的使用技巧和注意事项，需要的朋友参考一下 本人最近在研究iOS动画，至于原理，我不在这里说了。毕竟这里的标题：水波纹的实现。 在这里，要学习水波纹的实现，首先要知道以下几点知识： 1.正弦函数：y = Asin(wx +b) + c。相信大家都比较熟悉。 2.CAShapeLayer的简单实用，相信看一下，就是知道其大概
-
本文向大家介绍Android实现3D翻转动画效果，包括了Android实现3D翻转动画效果的使用技巧和注意事项，需要的朋友参考一下 Android中并没有提供直接做3D翻转的动画，所以关于3D翻转的动画效果需要我们自己实现，那么我们首先来分析一下Animation 和 Transformation。 Animation动画的主要接口，其中主要定义了动画的一些属性比如开始时间，持续时间，是否重复播放