CSS动画——淡入淡出答案

【问题标题】：CSS animations - fading in and fading outCSS动画——淡入淡出
【发布时间】：2019-02-11 20:40:39
【问题描述】：

我正在尝试在 CSS 中的菜单上制作一些动画。下面是当我将鼠标悬停在标题上时我必须让菜单淡入的代码。我还为淡出添加了类似的 CSS 规则，但我无法让它按我想要的方式工作。

尝试了一些东西，但我能做的最好的就是让它淡入，然后一旦它处于完全不透明状态，它就会再次淡出，直到动画结束，然后只显示块，所以它基本上会淡出ina 然后就出来了，就好像没有动画一样。

ul{
  list-style:none;
  padding:0px;
  margin:0px;
}
ul >li >ul{
  display:none;
}
ul >li:hover >ul{
  display:block;
}

.fade_in {
  -webkit-animation-name: fade_in;
  -webkit-animation-duration: 1s;
  animation-name: fade_in;
  animation-duration: 1s;
}
@-webkit-keyframes fade_in {
  from {opacity: 0} 
  to {opacity: 1}
}
@keyframes fade_in {
  from {opacity: 0} 
  to {opacity: 1}
}

.fade_out {
  -webkit-animation-name: fade_in;
  -webkit-animation-duration: 1s;
  animation-name: fade_in;
  animation-duration: 1s;
}
@-webkit-keyframes fade_out {
  from {opacity: 1} 
  to {opacity: 0}
}
@keyframes fade_out {
  from {opacity: 1} 
  to {opacity: 0}
}

<ul>
  <li>Heading
    <ul class="fade_in">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>

【问题讨论】：

那么，你想让它做什么？
@ChrisW。感谢您的评论抱歉，如果我解释得不够好，我希望它在您不再悬停在它上面时淡出

标签： html css css-animations

【解决方案1】：

您想要实现的目标是使用 CSS transition 而不是 animation 更容易，如下所示：

transition: opacity .4s ease-in-out;

因为您既不能为display 属性设置动画也不能转换，因此我将默认状态从display: none; 更改为opacity: 0;。

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul>li>ul {
  opacity: 0;
  position: absolute;
  pointer-events: none;
  transition: opacity .4s ease-in-out;
}

ul>li:hover>ul {
  pointer-events: all;
  opacity: 1;
}

<ul>
  <li>Heading
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>

【讨论】：

我试过了，但我认为它不适合我在屏幕上
你也可以通过 CSS 解决这个问题。 ul>li>ul { pointer-events: none } 和 ul>li:hover>ul { pointer-events: all; }.

【解决方案2】：

你可以试试这样的

HTML

<div>Heading
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
</div>

CSS

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

div>ul {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s 1s, opacity 1s linear;
    overflow: hidden;
}

div:hover>ul {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
    transition: opacity 1s linear;
}

【讨论】：