我正在尝试学习 Vue.js 并进行基本的淡入淡出。我有一个始终保留在页面上的链接列表。单击链接时，我希望淡入和淡出div. 默认div情况下看不到。这div包含几个组件。我尝试遵循文档。然而，该元素仅在离开时淡出，但进入时没有任何反应。我删除了本文档的多余部分并保留了相关元素。
<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 …我有一个模态，它是半透明深色背景上的白色容器。当触发此模式时，我希望背景淡入，之后我希望白色容器从屏幕底部向上滑动。
但是，虽然淡入有效，但向上滑动却不起作用。我究竟做错了什么？
模板：
<transition name="modal">
<div v-if="showModal" class="backdrop">
<transition name="content">
<div v-if="showModal" @click="showModal = false" class="container">
content
</div>
</transition>
</div>
</transition>
CSS 动画：
.modal-enter-active {
animation: fade-in-and-slide-up 1s;
}
.content-enter-active {
animation: wait-and-fade-in 4s;
}
@keyframes wait-and-fade-in {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in-and-slide-up {
0% {
transform: translateY(100%);
}
50% {
}
100% {
transform: translateY(0);
}
}
我试图向这样的插槽添加过渡
<template>
<transition name="committee">
<div class="card">
<slot></slot>
</div>
</transition>
</template>
添加了这样的 CSS 类
.committee-enter-from{
opacity: 0;
transform: translateX(-3rem);
}
.committee-enter-active{
transition: all 1s ease-in;
}
.committee-enter-to{
opacity: 1;
transform: translateX(0) ;
}
父模板看起来像这样
<section class="section">
<app-committee>
<div class="content">
<div class="imgText">
<div class="imgBx">
<img src="#">
</div>
<h3>Samanta Doe<br><span>Manager</span></h3>
</div>
<ul class="sci">
<li><a href="#">
</a></li>
<li><a href="#">
</a></li>
</ul>
</div>
</app-committee>
</section>
过渡不起作用。我可能犯了什么错误。
我有两个div，我使用transition-group在它们之间进行转换，它的工作原理应该是这样的——但是，div转换下方的内容是“跳跃”的，具体取决于div的高度。我想要的是阻止跳跃，而是以某种方式进行动画处理，这样在元素之间切换时我会得到一个很好的平滑过渡，而不会“推”到带有“跳跃”的内容。
希望这是有道理的:)
我在这里设置了codesandbox的示例： https: //codesandbox.io/s/reverent-stallman-8ixhp ?file=/src/components/HelloWorld.vue
模板如下所示：
<div class="hello">
<button @click="groupShowOne">Show first {{ gShowFirst }}</button>
<button @click="groupShowTwo">Show second {{ gShowSecond }}</button>
<transition-group name="fade-group" tag="div" mode="out-in" appear>
<div
class="group-element"
v-if="gShowFirst"
style="background-color: yellow"
>
<h3>This is a headline</h3>
<p>This is a text</p>
</div>
<div
class="group-element"
v-if="gShowSecond"
style="background-color: red"
>
<h3>
This is a headline <br />This is a headline <br />This is a headline
This is a headline This is a headline This is a headline
</h3>
<p>
This is a text …由于我是 Vue 转换的新手，所以问一个简短的问题。我的问题是是否可以将过渡应用于元素/组件而不重新渲染它。因此，不能使用 v-if 或 v-show。我的用例是通过按两个不同的标题栏按钮来扩展和缩小 div 组件，因此我不希望元素在转换时重新渲染。感谢您的回答！
从下面的代码中，我想在按下“最大化”按钮时应用展开过渡，并使用“最小化按钮”反转过渡
<template>
<transition name="expand">
<div>
<div class="title-bar-controls" @mousedown.stop>
<Button aria-label="Minimize" @click="windowToggle('minimize')"></Button>
<Button aria-label="Maximize" @click="windowToggle('maximize')"></Button>
<Button aria-label="Close" @click="hideContainer"></Button>
</div>
</div>
</transition>
我一直在寻找这个问题的解决方案很长一段时间，但我似乎找不到这个问题的最佳解决方案。基本上我有一个手风琴，当用户打开它时，它应该轻轻地向下滑动，并有一个很好的过渡。
我很确定仅使用 css 就可以做到这一点。如果我错了，请纠正我，但 css 过渡的性能比 js 过渡更好。
现在我面临的问题的 HTML 是：
<transition name="slide-down">
<ul v-if="isDisplayingOpeningHours" class="mt-2 text-sm flex flex-col space-y-2">
<li v-for="i in 10" :key="i"> <!-- just for testing purposes -->
element
</li>
</ul>
</transition>
CSS 是：
<transition name="slide-down">
<ul v-if="isDisplayingOpeningHours" class="mt-2 text-sm flex flex-col space-y-2">
<li v-for="i in 10" :key="i"> <!-- just for testing purposes -->
element
</li>
</ul>
</transition>
这导致过渡不流畅。滑下来看上去没什么问题，但是滑上去的时候就真的很卡顿，一点也不流畅！如果我设置了max-height: 10rem它并不会使它变得更好。我希望有人可以调试帮助我解决这个问题，也许可以教我更多关于 vue 转换和 js 与 css 转换的知识。
编辑：
只是为了澄清，过渡本身应该仅由 css 组成。手风琴的开场是用js，没问题。另外，如果能看到一个与原生 vue-transition 组件一起使用的转换示例，那就太好了。
编辑2：
这是一个与我有同样问题的codesandbox。
https://codesandbox.io/s/frosty-bash-lmc2f?file=/src/components/HelloWorld.vue
标题几乎解释了一切。我在 StackOverflow 上搜索了解决方案，但都没有 帮助。
使用经典模态组件的示例：
Vue.component('modal', {
template: `
<transition name="modal">
<div class="modal-wrapper">
<div class="modal-dialog">
<slot></slot>
</div>
</div>
</transition>
`,
})
const app = new Vue({
el: '#app',
data: {
showModal: false,
},
})/* transition */
.modal-enter-active,
.modal-leave-active {
transition: opacity .5s;
}
.modal-enter,
.modal-leave-to {
opacity: 0;
}
.modal-wrapper {
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, .25);
}
.modal-dialog {
max-width: 90%; …我有以下 App.vue 文件：
<script setup>
import { RouterView } from "vue-router";
</script>
<template>
<RouterView v-slot="{ Component }">
<transition :name="fade" mode="out-in">
<component :is="Component" />
</transition>
</RouterView>
</template>
以及以下路由器文件：
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/",
name: "signin",
component: () => import("../views/signin.vue"),
},
{
path: "/dashboard",
name: "dashboard",
component: () => import("../views/dashboard.vue"),
},
],
});
export default router;
当我运行我的应用程序并单击任何链接时，无论它是否使用$router.push("/dashboard");或，都不会发生任何转换router-link(to="/dashboard" active-class="active")。我已经检查了许多其他问题和教程，但不幸的是它仍然不起作用。知道为什么没有发生转换吗？