vue页面从右侧滑出左侧消失特效

原创于 2019-05-11 16:20:26 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

vue.js 专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中实现页面切换时的过渡动画效果，通过使用transition组件和CSS动画，实现页面从右侧滑出左侧消失的特效，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在app.vue文件里

    <template>
      <div id="app">
        <!-- 需用transition标签包裹起来 -->
        <transition>
          <router-view/>
        </transition>
        <Footer></Footer>
      </div>
    </template>

    <style lang="scss">
      
      html{
        font-size: calc( 100vw / 7.5 )
      }
      // 页面从右侧滑出左侧消失特效
      #app{
        width: 100%;
        // padding-top: 46px;
        padding-bottom: 50px;
        overflow-x: hidden;
        font-size: 14px;
      }
      .v-enter{
        opacity: 0;
        transform: translateX(100%);
      }
      .v-leave-to{
        opacity: 0;
        transform: translateX(-100%);
        // 解决页面从上往下位移问题
        position: absolute;
      }
      .v-enter-active,.v-leave-active{
        transition: all 0.35s ease;
      }
    </style>