Переход элемента после повторного введения его в поток - PullRequest
Новая
       9

Переход элемента после повторного введения его в поток

0 голосов
/ 20 февраля 2019

Я знаю, что невозможно transition свойств, таких как display, position, visibility, но как можно добавить эффект перехода (более opacity в моем случае; работает либо на show и скрыть ) И возможность поставить display: none на этот элемент?

Нет необходимости transition: display .., но только после этогоустановлен на block, тогда начнется переход на opacity.

Я думал, что смогу обмануть, используя transition: display 0s, opacity .3s, но не могу заставить его работать.

КонечноЯ мог бы использовать трюки, такие как установка height: 0; overflow: hidden;, чтобы скрыть свой элемент, но в моем случае мне также необходимо удалить элемент из потока (элемент position: fixed) и предотвратить TAB bingна его потомках и фокусировке на скрытых элементах.

Является ли использование анимации единственной поддерживаемой альтернативой?

Нет Javascript-решений, пожалуйста;Я считаю, что презентация должна быть проблемой CSS.

1 Ответ

0 голосов
/ 20 февраля 2019

Возможно вы можете использовать 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>
...