vue.js - vue 淡入淡出过渡仅在元素离开而不进入时起作用
问题描述
我正在尝试学习 Vue.js 并进行基本的淡入淡出。我有一个始终留在页面上的链接列表。单击链接时,我希望淡入和淡出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>
解决方案
在 Vue 3 中,过渡类名称已从 更改-enter
为-enter-from
,因此应相应地重命名您的类以使过渡计算正常工作:
/* .fade-enter {/*...*/} ❌ Vue 2 class name */
.fade-enter-from {/*...*/}
推荐阅读
- c - 获取由 C 中的 AST 生成的树 ( String ) 输出的解决方案
- arrays - 查找数组中无序的对数
- c - C指针中的奇怪行为
- java - Java BigDecimal long 带十进制转换
- javascript - ClassName.variable 总是静态成员变量吗?
- flutter - Flutter:如何在 GetX 上监听变量变化
- database - FutureBuilder 和 ListView.builder
- html - Bootstrap Grid - 在 div 中获取文本和图像之间所需的间距/填充的问题
- flatpickr - Livewire 和 Flatpickr - 重新渲染后失败
- python - 我正在尝试创建一个在没有 CSV 模块的情况下读取 CSV 文件的函数,但遇到格式错误