vue页面过渡动画

最新推荐文章于 2024-09-04 18:40:00 发布

土生土长的IU

最新推荐文章于 2024-09-04 18:40:00 发布

阅读量270

点赞数

分类专栏： Vue 3.0 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/AIB_Kasic/article/details/129625799

版权

Vue 3.0 专栏收录该内容

100 篇文章 1 订阅

订阅专栏

  <router-view v-slot="{ Component }">
        <transition
          name="fade"
        >
          <component :is="Component" />
        </transition>
      </router-view>

 /* 渐变设置 */
 .fade-enter-from, .fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
.fade-enter-to, .fade-leave-from {
  opacity: 1;
}
.fade-enter-active {
  transition: all 0.5s ease;
}
.fade-leave-active {
   transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
}