不透明度：0 + 指针事件：无 vs 显示：无答案

【问题标题】：opacity: 0 + pointer-events: none vs display: none不透明度：0 + 指针事件：无 vs 显示：无
【发布时间】：2021-08-02 22:50:00
【问题描述】：

我正在使用 css 设计一个下拉菜单，我想知道，使用 opacity: 0 + pointer-events: none 而不是使用 display: none 有什么缺点吗？

我想在悬停时淡入/淡出。但dispaly 方式使它瞬间完成。并且不想做任何javascript。所以，

有什么方法可以在没有javascript的动画结束后制作display: none？
使用opacity: 0 + pointer-events: none 代替display: none 有什么副作用吗？

    #trigger{background-color: red}

    a{
        opacity: 0; 
        transition: 500ms 200ms; 
        pointer-events: none;
    }

    #trigger:focus +ul a{opacity: 1;
        pointer-events: all
    }

<!DOCTYPE html>
<html>
<body>
    <button id=trigger>Trigger</button>
    <ul>
        <a href="#">a<br></a>
        <a href="#">b<br></a>
        <a href="#">c<br></a>
    </ul>
</body>
</html>

这说明了问题。当它被隐藏时，我无法悬停或看到它们，这就是我想要的。但是当你按 tab-tab-tab 时，你可以得到它们。（点击触发显示菜单，点击其他地方隐藏）

【问题讨论】：

这个问题有点缺乏焦点——你在一篇文章中问了几个问题。回答您关于opacity: 0 和pointer-events: none 的问题：其中一个主要问题是仅使用键盘的用户仍然能够集中您的元素，因此它们实际上始终可用/可见。并且删除键盘交互来实现这种效果基本上会使应用程序无法访问，所以如果这是您接下来要考虑的事情，我建议您不要使用这种方法。
感谢您提供此信息！我会尽量避免这种情况。你能谈谈实现淡入淡出动画并让它不显示吗？
如果您包含minimal reproducible example，我可能会向您展示它如何与您的代码一起使用。
@AlexanderNied 我已经添加了。为了简单起见，它是通过焦点而不是悬停来完成的。

标签： css animation opacity display

【解决方案1】：

这是一个利用display: none 和opacity 的解决方案，无需任何pointer-events 设置。我们还依赖于CSS animations 而不是transition 属性。它是如何工作的：

锚点以透明 (opacity: 0) 和 display: none 开头；后一个属性将其完全隐藏在 DOM 布局流和可访问性树中
当我们聚焦 #trigger 时，我们将锚点设置为 display: block，并将由 @keyframes animatein 定义的 animation 应用于它们
我们定义的animatein 动画将锚点从opacity: 0 移动到opacity: 1，超过animation-duration 声明中定义的animation-duration 值。

#trigger {
  background-color: red
}

a {
  opacity: 0;
  display: none;
}

#trigger:focus+ul a {
  animation-name: animatein;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  display: block;
}

@keyframes animatein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

<!DOCTYPE html>
<html>

<body>
  <button id=trigger>Trigger</button>
  <ul>
    <a href="#">a<br></a>
    <a href="#">b<br></a>
    <a href="#">c<br></a>
  </ul>
</body>

</html>

您可能需要稍微调整一下以满足您的需求，但希望这能让您走上正确的道路。

【讨论】：

这行得通……但只有一种方式。当您失去焦点时，它会立即隐藏。不像我的例子那样平滑。