vue 淡入淡出过渡仅在元素离开且未进入时起作用

Question

我正在尝试学习 Vue.js 并进行基本的淡入淡出。我有一个始终保留在页面上的链接列表。单击链接时，我希望淡入和淡出div. 默认div情况下看不到。这div包含几个组件。我尝试遵循文档。然而，该元素仅在离开时淡出，但进入时没有任何反应。我删除了本文档的多余部分并保留了相关元素。

\n

<template>\n   <div class="list">\n      <ul>\n         <li @click="openWindPoetry">\xe2\x98\x9e Wind Poetry</li> // button that toggles div show\n      </ul>\n   </div>\n   <div style="width: 97%;" class="project container">\n      <transition name="fade" mode="out-in">\n         <div v-if="showWP" class="backdrop" @scroll.passive="handleScroll"> // div needed to transition\n            <Header theme="WP" header="Wind Poetry" :types="[\'Interaction\',\'Data Visualisation\',\'2020\']"></Header>\n            <BodyText theme="WP" heading="ABOUT"\n               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.">\n            </BodyText>\n            <div class="introImg">\n               <video alt="GIF DEMO" loop autoplay="autoplay" src="./assets/wind/wind_poetry-demo-1.mp4"></video>\n            </div>\n      </transition>\n   </div>\n</template>\n\n<script>\nexport default {\n  name: "App",\n  components: {\n    Header,\n    Gradient,\n    BodyText\n  },\n  data() {\n    return {\n      title: "LIST OF WORKS",\n      ProjTitle: "Wind Poetry",\n      showWP: false\n    };\n  },\n  methods: {\n    openWindPoetry() {\n      (this.title = "BACK TO HOME"),\n        (this.showWP = true),\n        (this.showRec = false);\n    }\n  }\n}\n</script>\n\n<style>\n#app {\n  font-family: "Roboto Mono";\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.fade-enter-active,\n.fade-leave-active {\n  transition: opacity 0.5s ease-out;\n}\n\n.fade-enter,\n.fade-leave-to {\n  opacity: 0;\n}\n</style>\n

\n

Answer 1

在 Vue 3 中，转换类名称已从 更改为-enter，-enter-from因此应相应地重命名您的类，以允许转换计算正常工作：

\n

/* .fade-enter {/*...*/}  \xe2\x9d\x8c Vue 2 class name */\n.fade-enter-from {/*...*/}\n

\n

演示

\n