代码之家 › 专栏 › 技术社区 › parsecer

Vue:out in,旧文本淡出,但新文本不淡入,突然出现

vuejs3 vue.js css html

1

parsecer · 技术社区 · 2 年前

我发现了这个代码笔,它可以使旧文本淡出并显示新文本: 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>

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

然而,当我尝试将其与 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>

为什么行为发生了变化?我该怎么修?

2 回复 | 直到 2 年前

1

Moritz Ringler 2 年前

Vue 3中对CSS类名进行了调整, .v-enter 现在 .v-enter-from :

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

它在一个 playround

2

1

Hatem 2 年前

改变 .v-enter 到 .v-enter-from

<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-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>

演示: https://livecodes.io/?x=id/frekdfs4eg2