vue移動(dòng)端 實(shí)現(xiàn)手機(jī)左右滑動(dòng)入場(chǎng)動(dòng)畫(huà)

2019-8-16    seo達(dá)人

app.vue



<template>

  <div id="app">

    <transition :name="transitionName">

      <keep-alive >

        <router-view v-if="$route.meta.keepAlive" class="Router"></router-view>

      </keep-alive>

    </transition >

    <transition :name="transitionName">

      <router-view v-if="!$route.meta.keepAlive"  class="Router"></router-view>

    </transition >

    <Play></Play>

  </div>

</template>

<script>import Play from './components/play'

export default {

  name: 'App',

  data () {

    return {

      transitionName: 'slide-left'

    }

  },

  watch: {

    '$route' (to, from) {

      // 切換動(dòng)畫(huà)

      let isBack = this.$router.isBack // 監(jiān)聽(tīng)路由變化時(shí)的狀態(tài)為前進(jìn)還是后退

      if (isBack === true) {

        this.transitionName = 'slide-right'

        // from.meta.keepAlive = false

        // to.meta.keepAlive = true

      } else {

        // from.meta.keepAlive = true

        // to.meta.keepAlive = false

        // this.transitionName = 'slide-left'

        if (this.$route.path.split('/').length < 3) {

          this.transitionName = 'slide-fade'

        } else {

          this.transitionName = 'slide-left'

        }

      }

      this.$router.isBack = false

    }

  },

  components: {

    Play

  }

}

</script>



<style>

.Router {

  font-family: Roboto, Lato, sans-serif;

  position: absolute;

  width: 100%;

  height: 100%;

  padding-bottom: 60px;

  transition: all .377s ease;

  box-sizing: border-box;

  overflow: auto;

}

.slide-left-enter,

.slide-right-leave-active {

  opacity: 0;

  -webkit-transform: translate(100%, 0);

  transform: translate(100%, 0);

}



.slide-left-leave-active,

.slide-right-enter {

  opacity: 0;

  -webkit-transform: translate(-100%, 0);

  transform: translate(-100% 0);

}

.ovf {

  overflow: hidden;

}

.center {

  width: 95%;

  margin: 0 auto;

  overflow-y: hidden;

}

li {

  list-style: none;

}

</style>



路由配置



    {

      path: '/playListDetail/:id',

      name: 'playListDetail',

      component: pather => require(['../components/playListDetail.vue'], pather),

      meta: {

        title: '歌單詳情',

        keepAlive: true,

        isBack: false

      }

    },



返回事件



 back () {

      this.$router.go(-1)

      this.$router.isBack = true

    }

藍(lán)藍(lán)設(shè)計(jì)m.820esy.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)  圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔