Плавный display none?

Привет!
Как лучше плавно скрыть один блок и на его месте плавно проявить другой по нажатию кнопки?
А потом через несколько секунд вернуть также плавно первый блок вместо второго?

Песочница JsFidle

p.s. Нашел тему на тостер, но там битые ссылки на решения.
  • Вопрос задан
  • 28030 просмотров
Решения вопроса 2
coderisimo
@coderisimo Куратор тега JavaScript
Вот вам всевозможные примеры.
css3.bradshawenterprises.com/cfimg

Суть : создаете классы с анимированными переходами через css. Назначаете эти классы элементу и наслаждаетесь эффектом.
Ответ написан
@FabiBoom
https://jsfiddle.net/aq7994ho/1/ поиграться с opacity и transition-delay ну или анимацию создать
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 5
profesor08
@profesor08 Куратор тега CSS
Сначала анимируешь исчезновение блока, потом задаешь ему display:none;
Чтоб показать блок, делаешь все наоборот. Задаешь ему display:block, а потом анимируешь его появление.
Тут нет ничего сложного или каких-то скрытых знаний, все просто и в лоб.
Ответ написан
@kova4
export default (button, container) => {

  default_position();
  button.onclick = () => {
    const box_height = container.scrollHeight
    if (!container.classList.contains('active')) {
      container.classList.add('active')
      button.classList.add('active')
      container.style.height = box_height + 'px'
    }
    else {
      container.classList.remove('active')
      button.classList.remove('active')
      container.style.height = '0px'
    }

  }

  function default_position() {
    const box_height = container.scrollHeight
    container.style.transition = 'height 0.25s';
    container.style.overflow = 'hidden';

    if (container.classList.contains('active')) {
      button.classList.add('active')
      container.style.height = box_height + 'px'
    }
    else {
      button.classList.remove('active')
      container.style.height = '0px'
    }

  }

}
Ответ написан
Комментировать
Animate
Ответ написан
Комментировать
@dsgnfox
По очереди добавляем классы. Интервал у того, что с display none должен быть больше, чем у блока с transition в цсс.
Вот пример с прелодером страницы
https://jsfiddle.net/artem__fox/7u69omxa/1/
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
08 дек. 2022, в 02:27
6000 руб./за проект
08 дек. 2022, в 01:28
7000 руб./за проект
08 дек. 2022, в 01:22
1500 руб./за проект