CSS3 过渡延迟，进出不同时间
Posted
技术标签:
【中文标题】CSS3 过渡延迟，进出不同时间【英文标题】：CSS3 transition delay, different timing for in and out 【发布时间】：2020-06-18 15:41:53 【问题描述】：我正在尝试在 Vue 中构建菜单打开和关闭转换，但在按钮单击时添加了一个类。
见：
button
position: absolute;
top: 50px;
right: 0;
.logo
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transition: transform 1s;
transition-delay: 0s;
.menu
position: absolute;
top: 0;
left: 150px;
transform: translateY(-100%);
transition: transform 1s;
transition-delay: 1s;
li
opacity: 0;
transition: opacity 1s;
transition-delay: 0.8s;
li.active
opacity: 1;
/* Opened menu */
.menu-opened .logo
transform: scale(2);
transition-delay: 1s;
.menu-opened .menu
transform: translateX(0);
transition-delay: 0s;
.menu-opened li
opacity: 1;
https://codepen.io/drewbaker/pen/zYGEJQJ
打开菜单：徽标放大，然后 1 秒后，菜单向下滑动，然后项目淡入。
关闭菜单：项目淡出，然后菜单向上滑动，然后 1 秒后，徽标缩小。
在我的一生中，我无法让它像我期望的那样工作。我想我不太了解类如何影响 CSS 过渡。
【问题讨论】：
我不确定你的问题，你能澄清一下吗？我运行了 codepen，它似乎可以按您的意愿工作。 关闭菜单时过渡的顺序应该倒退。 菜单-向下滑动和项目-淡入应该同时发生吗？ 你要达到什么目的，能详细解释一下吗？ 【参考方案1】：我知道你想要
-
徽标放大
1 秒后菜单向下滑动
项目淡入（可能是 0.5 秒或其他时间。这取决于您）
然后
-
项目淡出（可能是 0.5s 或其他。这取决于你）
菜单向上滑动
1 秒后菜单缩小
如果是正确的愿望，您可以更改以下 css 转换。
.logo
transition-delay: 1.5s;
.menu
transition-delay: 0.5s;
.menu-opened .logo
transition-delay: 0s;
.menu-opened .menu
transition-delay: 1s;
/* Fade in and out menu items */
.menu li
opacity: 0;
transition: opacity 1s;
transition-delay: 0s;
.menu-opened .menu li
opacity: 1;
transition: opacity 1s;
transition-delay: 1.5s;
当你点击toggle menu-opened时会立即添加。所以你应该先去掉.menu-opened .logo中的transition-delay，然后先在.menu-opened .menu中添加transition-delay。你只需要改变这种方式.
new Vue(
el: '#container',
data:
menuOpened: false,
,
computed:
classes()
return [
"main",
"menu-opened": this.menuOpened
]
,
menuClasses()
return [
"menu"
]
);button
position: absolute;
top: 50px;
right: 0;
.logo
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transition: transform 1s;
transition-delay: 1.5s;
.menu
position: absolute;
top: 0;
left: 150px;
transform: translateY(-100%);
transition: transform 1s;
transition-delay: 0.5s;
/* Opened menu */
.menu-opened .logo
transform: scale(2);
transition-delay: 0s;
.menu-opened .menu
transform: translateX(0);
transition-delay: 1s;
.menu li
opacity: 0;
transition: opacity 1s;
transition-delay: 0s;
.menu-opened .menu li
opacity: 1;
transition: opacity 1s;
transition-delay: 1.5s;
<html>
<head>
</head>
<body>
<div id="container">
<main :class="classes">
<button @click="menuOpened = !menuOpened">Toggle</button>
<h1 class="logo">Logo</h1>
<div :class="menuClasses">
<ul>
<li>Menu item here</li>
<li>Menu item here</li>
<li class="active">Menu item here</li>
<ul>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</body>
</html>【讨论】：
【参考方案2】：可以在正确的地方使用transitions来实现。
我已在以下代码笔中添加了您的期望。
https://codepen.io/ravinila-the-flexboxer/pen/LYVemGj
【讨论】：
【参考方案3】：给你：
.logo
transition-delay: 1.5s;
.menu
transition-delay: 0.5s;
.menu-opened .logo
transition-delay: 0s;
.menu-opened .menu
transition-delay: 1s;
.menu li
opacity: 0;
transition: opacity 1s;
transition-delay: 0s;
.menu-opened .menu li
opacity: 1;
transition: opacity 1s;
transition-delay: 1.5s;
【讨论】：
似乎是从接受的答案复制/粘贴以上是关于CSS3 过渡延迟，进出不同时间的主要内容，如果未能解决你的问题，请参考以下文章