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秒，但正确淡出。

我希望它能够淡入淡出，但我无法找到一种方法来为 和分别设置一个延迟功能到visibility属性> out 过渡。这甚至可能吗？

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

Answer 1

这是因为您的商品不再可见。当您延迟visibility转换时，您的商品会更改其opacity，而不会显示此更改。然后（0.25秒后），visibility转换开始...但您的项目已经有opacity: 1。

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

CSS转换延迟进出？

1 个答案: