0

У меня появилась такая проблема когда проходит время выполняется функции с этим проблем нет. Но когда я скрываю элемент при помощи значения visibility: hidden; происходит резкая анимация исчезновения. А мне нужно чтобы это было плавно. Помоги пожалуйста. Если вопрос показался тупым то извините.

1 ответ 1

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>

3
  • Это правда. Для подобных переходов используется свойство transition со следующей сигнатурой: <на_что_реагировать> <длительность_перехода> <тип_перехода>. Подробнее в документации
    – MrShnaider
    30 ноя 2022 в 5:52
  • Это враньё. visibility тут никакой роли не играет, плавное скрытые происходит с помощью свойства opacity которое со значения 1 переходит в значение 0. Можно было бы и написать что плавное скрытие происходит с помощью opacity.
    – ΝNL993
    30 ноя 2022 в 18:50
  • иногда бывают моменты когда нужно и visibility и opacity, например когда нужно плавно скрыть блок и не взаимодействовать с ним, display: none тут не поможет, анимации с ним не сработают, поэтому тут используется visibility и opacity.
    – Roman
    1 дек 2022 в 3:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.