Плавный display none?

Question

[Mesuti]

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

Песочница JsFidle

p.s. Нашел тему на тостер, но там битые ссылки на решения.

Comments

[Bhudh]

Как плавно поменять значение с true на false?

Answer 1

[coderisimo]

Вот вам всевозможные примеры.
css3.bradshawenterprises.com/cfimg

Суть : создаете классы с анимированными переходами через css. Назначаете эти классы элементу и наслаждаетесь эффектом.

Comments

[Валерия]

супер

Answer 2

[FabiBoom]

https://jsfiddle.net/aq7994ho/1/ поиграться с opacity и transition-delay ну или анимацию создать

Answer 3

[profesor08]

Сначала анимируешь исчезновение блока, потом задаешь ему display:none;
Чтоб показать блок, делаешь все наоборот. Задаешь ему display:block, а потом анимируешь его появление.
Тут нет ничего сложного или каких-то скрытых знаний, все просто и в лоб.

Comments

[Никита Кит]

вот только height родителя из-за none-block всё равно будет постоянно прыгать.
К сожалению никто пока так и не дал ответ на решениgе этой проблемы, из-за чего я и подписывался.
Пока что спасают только slideToggle slideUp slideDown в jquery

[profesor08]

Можно сделать чтоб второй блок появлялся раньше. Или вообще не пользоваться display. А прятать блок за пределами экрана, например transform: translateX(-99999px); Тут кто во что горазд и какие задачи себе ставит. Но алгоритм действий всегда одинаковый, сначала анимация, а потом любым способом прячешь блоку куда угодно.

[Кот Фрейда]

Один из тех ответов, которые реально помогли, но ответами на вопрос не являются.

Answer 4

[Роман Романенко]

http://jquery.page2page.ru/index.php5/Поочередное_...

Answer 5

[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'
    }

  }

}

Answer 6

[Troodi Larson]

Animate

Answer 7

[dsgnfox]

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