CSS转换延迟进出？答案

【问题标题】：CSS Transition delay in and out?CSS转换延迟进出？
【发布时间】：2015-07-01 20:49:51
【问题描述】：

一旦不透明度过渡完成，我想使用opacity 淡化一个项目并相应地设置它的visibility。

考虑这段代码：

.menu {
  transition: opacity 0.25s ease-out 0s, visibility 0s ease 0.25s;
  opacity: 0;
  visibility: hidden;
}
.menu.open {
  opacity: 1;
  visibility: visible;
}

由于可见性延迟 0.25 秒，此菜单会直接弹出，但会正确淡出。

我希望它同时淡入和淡出，但我找不到为 in 和 out 过渡。这甚至可能吗？

所以理想情况下，我想告诉可见性有一个0s 延迟开始，然后一个0.25s 延迟结束，但似乎我只能设置一个值。

【问题讨论】：

标签： css css-transitions

【解决方案1】：

发生这种情况是因为您的项目不再可见。当您延迟 visibility 转换时，您的项目将更改其 opacity，而此更改不可见。然后（0.25 秒后），visibility 转换开始......但您的项目已经有一个 opacity: 1。

当项目显示时，您应该移除 visibility 的转换延迟/持续时间：

$(document).on('click', function(event) { $('.menu').toggleClass('open'); });

.menu {
  transition: opacity 0.25s ease-out 0s, visibility 0s ease 0.25s;
  opacity: 0;
  visibility: hidden;
}
.menu.open {
  transition: opacity 0.25s ease-out;
  opacity: 1;
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav class="menu open">My menu</nav>

【讨论】：

你的答案不起作用，因为一旦 .open 类被删除，元素立即回到可见性 0。