追求卓越一諾千金

藍藍設計--青海卫视下一站幸福,2011年成立||_亿彩彩票能提出来钱么,主創清華團隊|_|168极速赛车开奖结果,專注軟件和互聯網ui設計開發-_-云端彩票登录。擅長企業信息化管理|__众乐彩官网下载、監控|--鼻科手术中文版、大數據軟件UIUE谘詢和設計開發服務|__36选7好彩3复式5中奖。立足UI||幸运魔剑士,好好學習-_-掌上足球专业版,天天進步-姜宁转会费!


vue移動端 實現手機左右滑動入場動畫

2019-8-16 釋然 前端及開發文章及欣賞


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) {
      // 切換動畫
      let isBack = this.$router.isBack // 監聽路由變化時的狀態為前進還是後退
      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
    }
藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司--鞍山有线,為期望卓越的國內外企業提供卓越的UI界麵設計|_代练宝、BS界麵設計 |_|锦毛貂精、 cs界麵設計 |-|里维杰森、 ipad界麵設計 |铭牌标准、 包裝設計 _双色球最新500期走、 圖標定製 ||中国主席名单、 用戶體驗 -|-重庆市公安局长、交互設計|-动情迹忆、 網站建設 |--丁丁和杨坤后场接吻、平麵設計服務--168彩票手机app苹果。
標簽: vue移動端 實現手機左右滑動入場動畫 « 移動端實現導航的左右滑動 | 減少認知過載獲得更好的用戶體驗»


訂閱Rss