vue进入/离开 & 列表过渡transition

一.transition过渡

1.需求1(优化):想要一种效果，想要ios那种页面切换效果，总而言之就是过渡效果。

附上官网介绍地址：https://cn.vuejs.org/v2/guide/transitions.html

App.vue代码片段如下：

<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive>
         <router-view  v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
    </transition>
    <transition :name="transitionName">
         <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>
  </div>
</template>

以上是HTML上的代码，在keep-alive外层，增加transition，并且绑定name属性transitionName(这个是一个变量，用来控制想要加的样式前缀)，看了下面的代码你就懂了：

watch: {//使用watch 监听$router的变化
   $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if(to.meta.index > from.meta.index){
          //设置动画名称
          this.transitionName = 'slide-left';
      }else{
          this.transitionName = 'slide-right';
      }
   }
}

import Vue from 'vue';
import VueRouter from 'vue-router'

import Home from '@V/home'
import List from '@V/list'
import Approve from '@V/approve'
import DetailInfo from '@V/detailInfo'
import Info from '@V/info'

Vue.use(VueRouter)

export const routes = [
  {
    path:'/',
    name:'home',
    component:Home,
    meta: {
      keepAlive: false,
      index:1
    },
  },
  {
    path:'/list',
    name:'list',
    component:List,
    meta: {
      keepAlive: true,
      index:2
    },
  },
  {
        path:'/approve',
        name:'approve',
        component:Approve,
        meta: {
            keepAlive: false,
            index:3
        },
    },
    {
        path:'/detailInfo',
        name:'detailInfo',
        component:DetailInfo,
        meta: {
            keepAlive: false,
            index:3
        },
    },
    {
        path:'/info',
        name:'info',
        component:Info,
        meta: {
            keepAlive: false,
            index:4
        },
    }
]

看到这里估计你仅仅是知道transition变量是根据页面切换to和from索引来控制值，其实这个值是一个过渡类名的前缀，用来拼接transition的过渡状态，以下引用官方的解释：

扫描二维码关注公众号，回复： 5009830 查看本文章

过渡的类名

在进入/离开的过渡中，会有 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。

以上是官方的解释，下面看看css是怎么写的：

.slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
    will-change: transform;
    transition: all 500ms;
    position: absolute;
  }
  .slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  .slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

以上就是把transition的状态写了个过渡样式，加上这样的代码，你就可以实现需求一。附上完整代码：

<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive>
         <router-view  v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
    </transition>
    <transition :name="transitionName">
         <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>
  </div>
</template>

<script>


  export default {
    name: 'app',
    data(){
      return {
        // text:sessionStorage.getItem('parameters')
          transitionName:''
      }
    },
      watch: {//使用watch 监听$router的变化
          $route(to, from) {
              //如果to索引大于from索引,判断为前进状态,反之则为后退状态
              if(to.meta.index > from.meta.index){
                  //设置动画名称
                  this.transitionName = 'slide-left';
              }else{
                  this.transitionName = 'slide-right';
              }
          }
      }
  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';

  #app{
    /*position: relative;*/
  }
  body {
    background-color: #fbf9fe;
  }
  .vux-x-icon {
    fill:#1d83ef;
  }
  .backicon {
    width:38px;
    height:38px;
    display:inline-block;
    border-radius:100%;
    border:1px solid #1d83ef;

  }
  .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
    will-change: transform;
    transition: all 500ms;
    position: absolute;
  }
  .slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  .slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
</style>

注明：上周5同事发现了一个bug，发现用transition之后，切换页面的时候可能可能可能会出现一个问题：会出现短暂的白板！！！同事说，可能是加了transition左右滑动的时候定位出现的问题，所以出现短暂白板。当时的解决方案就是，在app.vue中的，给#app加了个样式，position:relative,其他的子组件每个最外层都加了个position:absolute。这样就完美解决了。不过今天写博客的时候，我又实验了一把，没出现白板的问题。如果出现以上问题，就试试加个定位吧。

另外，还有个bug，上面的代码，是通过v-if去判断缓存，而且有两个transition，运行起来发现，切换页面的时候交替闪现，其实，这里也猜到了，是两个transition通过v-if判断的时候，出现的交错的bug。下面继续完善上面的需求：

vue进入/离开 & 列表过渡transition

过渡的类名

猜你喜欢