时间戳

首页 > 解决方案 > 在将元素重新引入流后转换它

html - 在将元素重新引入流后转换它

问题描述

我知道这对于,transition之类的属性是不可能的display，但是如何添加过渡效果（在我的情况下；在show和hide上工作）并且能够在该元素上放置一个？positionvisibilityopacitydisplay: none

没有必要transition: display ..，但是在它设置为block之后，过渡opacity就会开始。

我以为我可以作弊，transition: display 0s, opacity .3s但我无法让它发挥作用。

当然，我可以使用诸如设置之类的技巧height: 0; overflow: hidden;来隐藏我的元素，但在我的情况下，我还需要从流中删除元素（元素是position: fixed）并防止TAB对它的后代进行 bing并聚焦隐藏的元素。

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

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

标签： htmlcsscss-transitions

解决方案

您可能可以使用 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>

推荐阅读