vue-router动画切换滚动条

寂寞沙洲冷1号选手

于 2022-11-29 10:53:21 发布

阅读量367

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_40283749/article/details/128093760

版权


.fade-transform--move,
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s ease;
}

.fade-transform-leave-active {
  position: absolute;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

动画效果

.app-main {
  background-color: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 5px;
  margin: 0 6px 15px 6px;
  position: relative;//设置这个属性不会出现滚动条
  overflow: hidden;//设置这个属性不会出现滚动条
}

 <section class="app-main" :style="{ 'min-height': heightMain }">
    <transition name="fade-transform" mode="out-in">
      <router-view :key="key" />
    </transition>
  </section>