（六）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就好了

热门工具换一换