vue移动端 实现手机左右滑动入场动画 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足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.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务。
标签: vue移动端 帝皇彩票官网实现手机左右滑动入场动画 « 移动端实现导航的左右滑动 | 减少认知过载获得更好的用户体验»


蓝蓝 http://www.bjhbys.com

  1. 2019年10月(53)
  2. 2019年9月(48)
  3. 2019年8月(63)
  4. 2019年7月(59)
  5. 2019年6月(59)
  6. 2019年5月(31)
  7. 2019年4月(37)
  8. 2019年3月(43)
  9. 2019年2月(26)
  10. 2019年1月(45)
  11. 2018年12月(41)
  12. 2018年11月(40)
  13. 2018年10月(29)
  14. 2018年9月(40)
  15. 2018年8月(87)
  16. 2018年7月(107)
  17. 2018年6月(86)
  18. 2018年5月(110)
  19. 2018年4月(40)
  20. 2018年3月(35)
  21. 2017年8月(35)
  22. 2017年7月(45)
  23. 2017年6月(7)
  24. 2017年5月(27)
  25. 2017年4月(51)
  26. 2017年3月(70)
  27. 2017年2月(65)
  28. 2017年1月(69)
  29. 2016年12月(55)
  30. 2016年11月(111)
  31. 2016年10月(92)
  32. 2016年9月(53)
  33. 2016年8月(9)
  34. 2016年7月(4)
  35. 2016年6月(9)
  36. 2016年3月(19)
  37. 2016年2月(26)
  38. 2016年1月(30)
  39. 2015年12月(33)
  40. 2015年11月(35)
  41. 2015年10月(46)
  42. 2015年9月(43)
  43. 2015年8月(40)
  44. 2015年7月(33)
  45. 帝皇彩票官网2015年6月(46)
  46. 2015年5月(58)
  47. 2015年4月(70)
  48. 2015年3月(55)
  49. 2015年2月(17)
  50. 帝皇彩票官网2015年1月(33)
  51. 2014年12月(21)
  52. 帝皇彩票官网2014年11月(84)
  53. 2014年10月(94)
  54. 2014年9月(6)
  55. 2014年8月(1)
  56. 2014年7月(13)
  57. 2014年6月(66)
  58. 2014年5月(99)
  59. 帝皇彩票官网2014年4月(88)
  60. 2014年3月(102)
  61. 2014年2月(68)
  62. 2014年1月(83)
  63. 2013年12月(106)
  64. 2013年11月(112)
  65. 2013年10月(61)
  66. 帝皇彩票官网2013年9月(20)
  67. 2013年7月(13)
  68. 2013年6月(27)
  69. 2013年5月(48)
  70. 2013年4月(39)
  71. 2013年3月(8)
  72. 帝皇彩票官网2013年2月(20)
  73. 2013年1月(31)
  74. 2012年12月(33)
  75. 2012年11月(31)
  76. 2012年10月(23)
  77. 2012年9月(8)
  78. 2012年7月(14)
  79. 2012年6月(15)
  80. 2012年5月(31)
  81. 2012年4月(24)
  82. 2012年2月(4)
  83. 2012年1月(8)
  84. 2011年12月(35)
  85. 2011年11月(32)
  86. 2011年10月(13)
  87. 2011年8月(1)
  88. 2011年6月(1)
订阅Rss
凤凰平台app下载 桔子彩票平台 福建11选5走势 博发彩票APP下载 状元彩票开奖 博发彩票APP下载 广西快3计划 吉利彩票登陆 状元彩票开奖 博发彩票开户