vue fade transition 只有在元素离开而不是进入时才有效

Question

我正在努力学习 Vue.js 并进行基本的渐变。我有一个 link 的列表，它总是留在页面上。单击 link 时，我希望淡入和淡出 div 的可见性。默认情况下 div 是看不到的。此 div 包含多个组件。我试图按照文档进行操作。但是，该元素只会在离开时淡出，而在进入时不会发生任何变化。我删除了本文档的多余部分并保留了相关元素。

<template>
   <div class="list">
      <ul>
         <li @click="openWindPoetry">☞ Wind Poetry</li> // button that toggles div show
      </ul>
   </div>
   <div style="width: 97%;" class="project container">
      <transition name="fade" mode="out-in">
         <div v-if="showWP" class="backdrop" @scroll.passive="handleScroll"> // div needed to transition
            <Header theme="WP" header="Wind Poetry" :types="['Interaction','Data Visualisation','2020']"></Header>
            <BodyText theme="WP" heading="ABOUT"
               body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nulla magna, consectetur quis tellus eget, ultricies mattis nisi. Duis dictum dolor in ante placerat, non ultricies dui faucibus. Vivamus lobortis sapien porttitor, molestie urna ut, varius neque. In eu dapibus lectus. Etiam consequat, massa ut consequat lacinia, velit dui molestie dolor, id dapibus sem justo a ante. In pellentesque, odio ut pharetra congue, quam tellus efficitur arcu, non mattis risus nibh ac turpis.">
            </BodyText>
            <div class="introImg">
               <video alt="GIF DEMO" loop autoplay="autoplay" src="./assets/wind/wind_poetry-demo-1.mp4"></video>
            </div>
      </transition>
   </div>
</template>

<script>
export default {
  name: "App",
  components: {
    Header,
    Gradient,
    BodyText
  },
  data() {
    return {
      title: "LIST OF WORKS",
      ProjTitle: "Wind Poetry",
      showWP: false
    };
  },
  methods: {
    openWindPoetry() {
      (this.title = "BACK TO HOME"),
        (this.showWP = true),
        (this.showRec = false);
    }
  }
}
</script>

<style>
#app {
  font-family: "Roboto Mono";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

Answer 1

在 Vue 3 中，transition class name has changed from -enter to -enter-from，因此您的类应该相应地重命名以允许转换计算正常工作：

/* .fade-enter {/*...*/}  ❌ Vue 2 class name */
.fade-enter-from {/*...*/}

demo

vue fade transition 只有在元素离开而不是进入时才有效

vue fade transition only work when element is leaving and not entering

vue.js

vuejs3

vue-transitions