Question

我知道transition，display，position之类的visibility属性是不可能的，但是如何添加过渡效果（超过opacity我的情况；在 show 和 hide 上工作） AND 并能够在该元素上放置display: none？

不需要transition: display ..，只是在将其设置为block之后，opacity上的过渡就会开始。

我以为我可以使用transition: display 0s, opacity .3s作弊，但我无法使其正常工作。

我当然可以使用诸如设置height: 0; overflow: hidden;之类的技巧来隐藏我的元素，但就我而言，我还需要从流中删除该元素（该元素为position: fixed ）并防止TAB依靠其后代并集中隐藏元素。

使用动画是唯一受支持的替代方法吗？

请不要使用Javascript解决方案；我认为演示文稿应该是CSS的关注点。

Answer 1

您可能可以使用CSS动画@keyframes。请注意，它可以添加出现的动画，但不会消失，因为display:none将立即应用。

function show() {
  var el = document.getElementById("display");
  el.classList.remove("hide");
  el.classList.add("show");
}

.hide {
  display: none;
}

.show {
  display: block;
}

.animation {
  animation: fadeIn 2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<p>
  <input type="text" placeholder="input 1">
</p>

<p id="display" class="animation hide">
  <input type="text" placeholder="input 2">
</p>

<button onclick="show()">show</button>

将元素重新引入流程后，将其过渡

1 个答案: