Html 旧文本淡出，但新文本不会淡入，而是突然出现

我发现了这样一个代码，它使旧文本淡出，而新文本出现:https://codepen.io/cythilya/pen/EXxved

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>

一百:

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
  }
});

然而，当我try 在Vue 3中使用它时，它会淡出旧文本，但不会淡入新文本-新文本突然出现:https://codesandbox.io/s/nameless-resonance-yjfl72?file=/src/App.vue

<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>
import HelloWorldVue from "./components/HelloWorld.vue";
export default {
  name: "App",
  components: {
    HelloWorld: HelloWorldVue,
  },

  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>

为什么行为会发生变化？我该怎么修呢？