Vue: out-in, old text fades out, but new text doesn't fade in, appears abruptly-CodePudding

I found this codepen that makes old text fade out and new text to appear: https://codepen.io/cythilya/pen/EXxved

html:

<div id="app">
  <button @click="show = !show">Click Me!</button>
  <transition mode="out-in">
    <div  v-if="show">Block 1</div>
    <p  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
  }
});

However when I try to use it with Vue 3, it fades out the old text, but doesn't fade in the new text - the new text appears abruptly: 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  v-if="show">Block 1</div>
      <p  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>

Why did the behavior change? How should I fix it?

CodePudding user response：

change .v-enter to .v-enter-from

<template>
  <div id="app">
    <button @click="show = !show">Click Me!</button>
    <transition mode="out-in">
      <div  v-if="show">Block 1</div>
      <p  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-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;
}
</style>

demo: https://livecodes.io/?x=id/frekdfs4eg2

CodePudding user response：

In Vue 3, the CSS class names were adjusted, .v-enter is now .v-enter-from:

.v-enter-from {
  opacity: 0;
}

Here it is in a playround