JavaScript 30 Day 5 Study Notes

Проект JavaScript 30 Day 5 включал работу с переходами CSS и flexbox в большей степени, чем с JavaScript. Мы манипулировали панелями изображений с текстом с помощью JavaScript, но настройка CSS сыграла жизненно важную роль.

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

Бос настроил HTML следующим образом:

<div class="panels">
    <div class="panel panel1">
        <p>Hey</p>
        <p>Let's</p>
        <p>Dance</p>
    </div>
    <div class="panel panel2">
        <p>Give</p>
        <p>Take</p>
        <p>Receive</p>
    </div>...
</div>

Затем Бос вложил flexbox внутрь flexbox. Я никогда раньше не видел, чтобы это делалось.

.panels {
     display: flex;
}
.panel {
     display:flex;
     flex-direction: column;
}

Он настроил первый и последний дочерний элемент div .panel так, чтобы он изначально находился вне области просмотра. Затем он создал второй подкласс, .panel.open-active, где они были видны.

.panel > *:first-child {transform: translateY(-100%);}
.panel.open-active > *:first-child {transform: translateY(0);}
.panel > *:last-child {transform: translateY(100%);}
.panel.open-active > *:last-child {transform: translateY(0);}

JavaScript просто прослушивал событие щелчка и переключался между двумя подклассами.

panels.forEach(panel => panel.addEventListener('click', toggleOpen));
function toggleOpen() {
    this.classList.toggle('open');
}

И аналогичная кодовая последовательность для повторного набора.

panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
function toggleActive(e) {
   if(e.propertyName.includes('flex')) {
      this.classList.toggle('open-active');
}}

Код был мне более знаком, но вложение гибких элементов div создало аккуратный визуальный эффект, которого я раньше не видел.

Посмотреть мои заметки с 4-го дня

Просмотрите мои заметки с самого начала.