未触发 Vue 关闭模式转换样式
Vue closing modal transition styling not triggered
在 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>
当我打开模式时,转换工作正常。但是当我关闭模式时,我的样式不起作用?
我想通了。在我的模态组件中,当我将 <transition appear name="fade">
直接放在 <template>
标签下时它起作用了。
在 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>
当我打开模式时,转换工作正常。但是当我关闭模式时,我的样式不起作用?
我想通了。在我的模态组件中,当我将 <transition appear name="fade">
直接放在 <template>
标签下时它起作用了。