时间戳

首页 > 解决方案 > 为什么当初始状态使用“显示：无”时，使用动画属性设置不透明度动画？

html - 为什么当初始状态使用“显示：无”时，使用动画属性设置不透明度动画？

问题描述

使用animation

以下动画显示了.child最初设置为 时的不透明度display: none;。

body {
  margin: 0;
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

.wrapper {
  width: 100vw;
  height: 100vh;
}

.wrapper .child {
  width: 200px;
  height: 200px;
  background-color: red;
  display: none;
}

.wrapper:hover .child {
  display: block;
  animation: fadeOut 1s ease forwards;
}
<div class="wrapper">
  <div class="child">

  </div>
</div>

尝试使用transition而animation不是不起作用。

使用transition

body {
  margin: 0;
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

.wrapper {
  width: 100vw;
  height: 100vh;
}

.wrapper .child {
  width: 200px;
  height: 200px;
  background-color: red;
  display: none;
}

.wrapper:hover .child {
  display: block;
  transition: opacity 1s ease;
  opacity: 0;
}
<div class="wrapper">
  <div class="child">

  </div>
</div>

这在这种情况下如何工作，animation为什么这在这种transition情况下不起作用？

标签： htmlcsscss-animations

解决方案

添加作为帮助未来访客的答案。

从这个链接：https://tympanus.net/codrops/css_reference/keyframes/这里是相关部分：

“主要区别在于，当属性值发生变化时（例如，当属性值在悬停时发生变化时）会隐式触发转换，而在应用动画属性时会显式执行动画。”

transition这是和之间的一个重要区别animation。

display: none这是关于设置后的转换和转换的相关答案display: block（如用户大卫的评论中所发布）：从显示无更改为阻止时转换不起作用

推荐阅读