Vue 3中out-in过渡旧元素淡出但新元素无淡入的问题排查

问题场景 #

在Vue2中可正常实现旧文本淡出、新文本淡入的切换效果，代码如下：

Vue2 代码 #

HTML

<div id="app">
  <button @click="show = !show">Click Me!</button>
  <transition mode="out-in">
    <div class="block" v-if="show">Block 1</div>
    <p class="block" v-else>Block 2</p>
  </transition>
</div>

CSS

body { font-family: 微軟正黑體; }
button { margin-bottom: 10px; }

#app {
  padding: 10px;
}

.block {
  background: #999;
  color: #fff;
  display: table-cell;
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
}

.v-leave { opacity: 1; }
.v-leave-active { transition: opacity 2s }
.v-leave-to { opacity: 0; }
.v-enter { opacity: 0; }
.v-enter-active  { transition: opacity 2s }
.v-enter-to { opacity: 1; }

JS

var vm = new Vue({
  el: '#app',
  data: {
    show: true
  }
});

将上述逻辑迁移到Vue3后，旧文本可正常淡出，但新文本无淡入效果，直接突然出现，Vue3代码如下：

Vue3 代码 #

<template>
  <div id="app">
    <button @click="show = !show">Click Me!</button>
    <transition mode="out-in">
      <div class="block" v-if="show">Block 1</div>
      <p class="block" v-else>Block 2</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { show: true };
  },
};
</script>

<style>
body {
  font-family: 微軟正黑體;
}
button {
  margin-bottom: 10px;
}

#app {
  padding: 10px;
}

.block {
  background: #999;
  color: #fff;
  display: table-cell;
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
}

.v-leave {
  opacity: 1;
}
.v-leave-active {
  transition: opacity 2s;
}
.v-leave-to {
  opacity: 0;
}
.v-enter {
  opacity: 0;
}
.v-enter-active {
  transition: opacity 2s;
}
.v-enter-to {
  opacity: 1;
}
</style>

问题原因 #

Vue3对过渡类名做了命名规范调整：

• Vue2中的v-enter（进入过渡的起始状态）在Vue3中被重命名为v-enter-from
• Vue2中的v-leave（离开过渡的起始状态）在Vue3中被重命名为v-leave-from

原Vue2的CSS类名在Vue3中不再被识别，导致新元素进入时没有初始的opacity:0状态，直接以opacity:1显示，因此没有淡入过渡效果。

修复方法 #

将CSS中的过渡起始状态类名替换为Vue3的规范命名：

/* 替换前 */
.v-leave { opacity: 1; }
.v-enter { opacity: 0; }

/* 替换后 */
.v-leave-from { opacity: 1; }
.v-enter-from { opacity: 0; }

完整修复后的CSS代码：

body {
  font-family: 微軟正黑體;
}
button {
  margin-bottom: 10px;
}

#app {
  padding: 10px;
}

.block {
  background: #999;
  color: #fff;
  display: table-cell;
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
}

.v-leave-from {
  opacity: 1;
}
.v-leave-active {
  transition: opacity 2s;
}
.v-leave-to {
  opacity: 0;
}
.v-enter-from {
  opacity: 0;
}
.v-enter-active {
  transition: opacity 2s;
}
.v-enter-to {
  opacity: 1;
}

修改后，新元素进入时会从opacity:0过渡到opacity:1，即可正常实现淡入效果。

内容的提问来源于stack exchange，提问作者parsecer