css - Vue关闭模态过渡样式未触发
问题描述
在一个 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>
标签下时,它可以工作。
推荐阅读
- amazon-web-services - API Gateway 资源策略:将 IAM 角色指定为 AWS 委托人
- javascript - 从浏览器中的对象获取数据
- bash - 获取上次提交中更改的目录列表
- sql - SQL Joined Tables - 每个“on”匹配字段的连接表上的多行合并为一行?
- ruby-on-rails - 无法成功部署到 Beanstalk
- mongodb - 分层架构/项目结构怎么可能?- 在 Spring Boot Reactive 之上的 Vaadin 与 MongoDB 反应
- java - 使用 Spring 将 DataSource 与 Transaction 一起使用
- python - 使用 jira-python 标记/取消标记 JIRA 问题的问题
- python - 检查两个排序的字符串在 O(log n) 时间内是否相等
- python - Networkx 旅行商问题 (TSP)