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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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