未触发 Vue 闭合模式转换样式

Question

在一个 Vue 组件中(我在 Drupal 8 项目的树枝模板中注册(我有一个

<transition appear name="fade">
My modal
</transition>

以及模态关闭时的以下 CSS 样式：

<style scoped>
@-webkit-keyframes fade-out-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
}
@keyframes fade-out-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
}
.fade-enter, .fade-leave-active {
-webkit-animation: fade-out-bottom 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220) both;
animation: fade-out-bottom 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220) both;
}
</style>

当我打开模态时，过渡工作正常。但是当我关闭模态时，我的样式不起作用？

Answer 1

我想通了。在我的模态组件中，当我将<transition appear name="fade">直接放在<template>标签下时，它可以工作。