CSS 过渡延迟进出？

Question

我想在使用 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 属性单独设置延迟函数 [= =28=]and out 转换。这可能吗？

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

Answer 1

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

当项目显示时，您应该为 visibility 删除过渡 delay/duration：

$(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>

CSS 过渡延迟进出？

CSS Transition delay in and out?

css

css-transitions