У меня появилась такая проблема когда проходит время выполняется функции с этим проблем нет. Но когда я скрываю элемент при помощи значения visibility: hidden; происходит резкая анимация исчезновения. А мне нужно чтобы это было плавно. Помоги пожалуйста. Если вопрос показался тупым то извините.
1 ответ
function hide(){
document.querySelector('.block').classList.toggle('hide');
}
.block{
width: 50px;
height: 50px;
background:red;
opacity:1;
visibility: visible;
transition: all .2s linear;
}
.hide{
opacity:0;
visibility: hidden;
transition: all .2s linear;
}
<div onclick = 'hide()' class = 'block'>
</div>
<button onclick = 'hide()' > hide </button>
-
Это правда. Для подобных переходов используется свойство
transition
со следующей сигнатурой:<на_что_реагировать> <длительность_перехода> <тип_перехода>
. Подробнее в документации 30 ноя 2022 в 5:52 -
Это враньё.
visibility
тут никакой роли не играет, плавное скрытые происходит с помощью свойстваopacity
которое со значения1
переходит в значение0
. Можно было бы и написать что плавное скрытие происходит с помощьюopacity
.– ΝNL99330 ноя 2022 в 18:50 -
иногда бывают моменты когда нужно и visibility и opacity, например когда нужно плавно скрыть блок и не взаимодействовать с ним, display: none тут не поможет, анимации с ним не сработают, поэтому тут используется visibility и opacity.– Roman1 дек 2022 в 3:27