Анимированная смена блоков div по клику на них

Question

Разрабатываю страницу-информационное введение, на ней 5 блоков div (пока), каждый размером в окно браузера. Необходимо, чтобы при клику по 1-му блоку плавно отображался 2-й (одновременно с этим первый блок должен плавно исчезать), и так далее до конечного блока; fadeOut/fadeIn вполне устроит (можно и другие анимации, если не трудно). Пробовал через абсолютное позиционирование, visibility:hidden (или display:none) и jquery-смену атрибутов для каждого отдельного блока, но слишком громоздко. Если решением является цикл, он должен быть конечным, т.к. последний div содержит ссылки на ветки сайта.

Answer 1

Рассмотрим css свойство transition. Собственно, тут сложность заключается в том что бы понять работу transition

У transition есть значение transition-timing-function

transition-timing-function представляет собой математическую функцию, показывающую, как быстро по времени меняется указанное через transition-property значение свойства.

Это значит изменение какого-то свойства по времени будет одинаково, а вот анимация будет выглядеть по разному.

Пример:

var pages = ['#page_1', '#page_2',  '#page_3', '#page_4',  '#page_5']; 
var allPages = '.page-container';

function show(prev, next) {
  $(prev).removeClass('show');
  $(next).addClass('show');
}

.page-container {
   transition: opacity 1s, width 1s step-end, height 1s step-end; 
   width: 0;
   height: 0;
   opacity: 0;
}

.show {
   transition: opacity 3s linear; 
   width: 400px;
   height: 400px;
   opacity: 1;
}

.page-container.one {
  background: green;
}
.page-container.two {
  background: red;
}
.page-container.three {
  background: yellow;
}
.page-container.four {
  background: olive;
}
.page-container.five {
  background: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page_1" class="page-container one show" onClick="show(pages[0], pages[1])">1</div>
<div id="page_2" class="page-container two" onClick="show(pages[1], pages[2])">2</div>
<div id="page_3" class="page-container three" onClick="show(pages[2], pages[3])">3</div>
<div id="page_4" class="page-container four" onClick="show(pages[3], pages[4])">4</div>
<div id="page_5" class="page-container five" onClick="show(pages[4], pages[0])">5</div>

В этом примере смотрим на закрытие блока путем удаление класса show

.page-container {
       transition: opacity 1s, width 1s step-end, height 1s step-end; 
       width: 0;
       height: 0;
       opacity: 0;
    }

Здесь сначала отработает плавно opacity: 0;, а потом в конце периода схлопнутся width и height. Такой эффект достгается свойствами step-end и ease

opacity 1s (по умолчанию ease)

ease Анимация начинается медленно, затем ускоряется и к концу движения опять замедляется step-end Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.

В другом примере

var pages = ['#page_1', '#page_2',  '#page_3', '#page_4',  '#page_5']; 
var allPages = '.page-container';

function show(prev, next) {
  $(prev).removeClass('show');
  $(next).addClass('show');
}

.page-container {
   transition: opacity 1s, width 1s ease-out, height 1s ease-out; 
   width: 0;
   height: 0;
   opacity: 0;
}

.show {
   transition: opacity 2s linear; 
   width: 400px;
   height: 400px;
   opacity: 1;
}

.page-container.one {
  background: green;
}
.page-container.two {
  background: red;
}
.page-container.three {
  background: yellow;
}
.page-container.four {
  background: olive;
}
.page-container.five {
  background: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page_1" class="page-container one show" onClick="show(pages[0], pages[1])">1</div>
<div id="page_2" class="page-container two" onClick="show(pages[1], pages[2])">2</div>
<div id="page_3" class="page-container three" onClick="show(pages[2], pages[3])">3</div>
<div id="page_4" class="page-container four" onClick="show(pages[3], pages[4])">4</div>
<div id="page_5" class="page-container five" onClick="show(pages[4], pages[0])">5</div>

Анимированы так же with и height

transition: opacity 1s, width 1s ease-out, height 1s ease-out;

ease-out Анимация начинается быстро, к концу замедляется

За счет того что width и height изменяются по заданной функции ease-out получается такой эффект.

БЛОГ НА HUSL

Анимированная смена блоков div по клику на них

Ответы (1 шт):