Vue3动画路由转场

最新推荐文章于 2024-08-05 16:10:08 发布

@gaoyanfeng

最新推荐文章于 2024-08-05 16:10:08 发布

阅读量1.8k

点赞数 2

分类专栏： vue 文章标签： vue css3

本文链接：https://blog.csdn.net/GYF_123/article/details/114294506

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<template>
<div id="app">
        <router-view v-slot="{Component}">
          <keep-alive>
            <transition :name="animation">
              <component :is="Component"/>
            </transition>
          </keep-alive>
        </router-view>
</div>
</template>


<script>
import { ref , watch} from 'vue';
import {useRouter , useRoute} from "vue-router";
export default {
  setup(){
    const router = useRouter();
    const route = useRoute();
    const animation = ref('slide');
    watch(route , ()=>{
      animation.value = route.meta.index == 1 ? 'slide-right' : 'slide-left'
    })
    return {
      animation
    }
  }
}
</script>
<style lang="scss">
#app {
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.router-view{
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
}

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