当我单击 CSS 上的转换按钮时，它会向左快速冲刺答案

【问题标题】：When I click button for transition on CSS it makes a quick dash to the left当我单击 CSS 上的转换按钮时，它会向左快速冲刺
【发布时间】：2021-09-22 23:44:24
【问题描述】：

我不知道为什么会这样，我正在使用 Vue-router，当我单击按钮更改页面时，我希望元素从上方淡出并淡入。我设法做到了，但是当我单击按钮时，元素向左移动了大约 30px，然后动画发生了。我只有 2 页，其中只有一个元素比有更多元素的页面移动更多。欢迎任何建议在这里是我来自 APP Vue 的代码，其中正在发生转换并加载了路由：

<template>
 <div>
   <transition name="fade" mode:out-in>
     <router-view></router-view>
   </transition>
 </div>
</template>


<style>
.fade-leave-active {
 transition: opacity 1s ease;
 opacity: 0;
 animation: fade-out 1s ease-out;
}

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

.fade-enter-active {
 animation: fade-in 2s ease-out;
}

@keyframes fade-out {
 0% {
   opacity: 1;
 }
 60% {
   opacity: 0.4;
   transform: translateY(0px);
 }
 100% {
   opacity: 0;
   transform: translateY(-300px);
 }
}

@keyframes fade-in {
 0% {
   opacity: 0;
   transform: translateY(-300px);
 }
 60% {
   opacity: 0;
 }
 100% {
   opacity: 1;
   transform: translateY(0);
 }
}
</style>

【问题讨论】：

标签： html css vue.js css-animations

【解决方案1】：

我遇到了类似的问题，有一个简单的解决方法...

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

省略不必要的关键帧

.fade-enter-from {
  opacity: 0;
  transform: translateY(300px);
}
.fade-leave-to {
  opacity: 0;
  transform: translateY(-300px);
}
.fade-enter-active,
.fade-leave-active {
  transition: all 1s ease;
}
.fade-enter-to,
.fade-leave-from {
  opacity: 1;
  transform: translateY(0);
}

您可以使用其他两个过渡类：-enter 和 -leave 以获得更流畅的动画效果。更多参考：transitions, router view's v-slot

【讨论】：