vue3.0 页面动画以及页面缓存

最新推荐文章于 2024-08-06 14:44:24 发布

可？

最新推荐文章于 2024-08-06 14:44:24 发布

阅读量502

点赞数

文章标签： javascript vue.js html5 css3

本文链接：https://blog.csdn.net/weixin_46772652/article/details/115864815

版权

template

 <router-view class="router-view" v-slot="{ Component }">
        <transition name="slide-left">
          <keep-alive :include="state.hello">
          <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>

css

// .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(0.55, 0, 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);
}```