（六）vue开发 - transition之页面切换过渡动画

h5页面在内嵌在app里使用，页面切换时体验不太友好，可以使用transition设置动画，页面前进和后退时保持和原生客户端一样的切换效果：

1、在路由里设置，meta的index的值，通过index值的大小控制页面跳转层级顺序，如下：首页 => 产品 => 详情

export default new Router({
routes: [
{
path: '/index',
name: 'index',
component: index,
meta:{
title:'首页',
index:1
}
},
{
path: '/list',
name: 'list',
component: list,
meta:{
title:'产品',
index:2
}
},
{
path: '/detail',
name: 'detail',
component: detail,
meta:{
title:'详情',
index:3
}
}]
})

2.在

app.vue

文件里加上transition动画效果

<template>
<div id="app" :class="[isIos ? 'xn-ios':'']">
<transition :name="transitionName">
<keep-alive><router-view /></keep-alive>
</transition>
</div>
</template>

<script>
export default {
name: 'app',
data(){
return {
isIos:false,
transitionName:''
}
},
create(){
},
mounted(){
this.getDevice();

},
methods: {
getDevice(){
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
this.isIos = true;
}
}
},
watch: {//使用watch 监听$router的变化
$route(to, from) {
//如果to的索引值为0，不添加任何动画；如果to索引大于from索引,判断为前进状态,反之则为后退状态
if(to.meta.index > 0){
if( to.meta.index < from.meta.index){
this.transitionName = 'slide-right';
}else{
this.transitionName = 'slide-left';
}
}else if(to.meta.index == 0 && from.meta.index > 0){
this.transitionName = 'slide-right';
}

//当然，如果你没有需要设置索引值为0的页面可以直接用着一段
/*if( to.meta.index < from.meta.index){
this.transitionName = 'slide-right';
}else{
this.transitionName = 'slide-left';
}*/
}
}
}
</script>

<style>
* {
margin: 0;
padding: 0;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: transparent;
font-family: arial;
color: #333;
-webkit-user-select: none;
}

html {
font-family: arail;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
line-height: 1;
font-size: 20px;
height:100%;
overflow-x: hidden;
}
body{
position: relative;
overflow-x: hidden;
background: #f0f2f5;
min-height:100%;
display: flex;
flex-direction: column;
}
#app{
display: flex;
flex:1;
flex-direction: column;
background: #f0f2f5;
}
img {
display: block;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
outline: none;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all .3s;
position: absolute;
width:100%;
left:0;
}
.slide-right-enter {
transform: translateX(-100%);
}
.slide-right-leave-active {
transform: translateX(100%);
}
.slide-left-enter {
transform: translateX(100%);
}
.slide-left-leave-active {
transform: translateX(-100%);
}
</style>

说明：我项目里有的页面，是一个单独的页面，并不是从某个H5路由跳过来，也不需要跳转到其他H5页面上去，这样的页面不需要动画，因为我的app里，webview打开H5页面时就已经具备动画效果了，所以，我把app打开的第一个H5的index都设置为0，后面这个页面如果要跳到其他页面，只需要将其他页面的index值设置为大于0就好了