Vue转场动画(仿微信)

最新推荐文章于 2023-07-01 18:58:42 发布

ZionHH

最新推荐文章于 2023-07-01 18:58:42 发布

阅读量981

点赞数 1

分类专栏： Vue 文章标签： vue 前端 transition

本文链接：https://blog.csdn.net/z291493823/article/details/123652276

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

需要动态绑定 transition的name

  <div>
  	<transition :name="transitionName">
	  <router-view></router-view>
  	</transition>
  </div>

我这里通过记录路由的方式，来判断前进或后退

export default {
  data () {
    return {
      transitionName: '',
      routes: []
    }
  },
  watch: {
    '$route' (to) {
      const routes = [...this.routes]
      if (routes.length === 0) {
        // 首次进入
        to.name && routes.push(to.name)
      } else {
        if (routes.indexOf(to.name) !== -1) {
          // 存在，后退
          this.transitionName = 'slide-right'
          routes.splice(routes.indexOf(to.name) + 1, 100)
        } else {
          // 前进
          this.transitionName = 'slide-left'
          routes.push(to.name)
        }
      }
      this.routes = routes
    }
  }
}

CSS样式

.slide-left-enter {
  transform: translateX(100%);
}
.slide-left-leave-active {
  transform: translateX(-20%);
  z-index: -1;
}
.slide-left-enter-active {
  z-index: 2;
}
.slide-right-enter {
  transform: translateX(-20%);
}
.slide-right-leave-active {
  transform: translateX(100%);
  z-index: 2;
}
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  position: absolute;
  top: 0;
  box-shadow: 0 0 4px 4px rgba(0, 0, 0, .08);
  will-change: transform;
  transition: transform .35s;
}