Пояснення щодо переходів CSS

Найпростіший (і найпростіший) спосіб анімувати ваші компоненти - це CSS Transitions. У цій статті ви дізнаєтесь, як працюють переходи CSS, і як робити анімацію за допомогою нього.

Перехід відбувається, коли властивість CSS змінюється від одного значення до іншого значення протягом певного періоду часу.

Ви можете створити переходи CSS за допомогою transitionвластивості:

.selector { transition: property duration transition-timing-function delay; }

transitionВластивість є узагальнюючим з чотирьох властивостей CSS, transition-property, transition-duration, transition-timing-function, transition-delay.

.selector { transition-property: property; transition-duration: duration; transition-timing-function: timing-function; transition-delay: delay /* The transition property is the shorthand for the above four properties */ transition: property duration timing-function delay; }

transition-propertyпосилається на властивість CSS, яке ви хочете перенести. Це потрібно в transitionстенограмі.

transition-durationвідноситься до тривалості переходу. Як довго ви хочете, щоб перехід тривав? Це значення записується в секундах із sсуфіксом (подобається 3s). Це також потрібно в transitionстенографії.

transition-timing-functionстосується того, як відбувається перехід. Детальніше про це ви дізнаєтесь пізніше.

transition-delayозначає, скільки часу ви хочете зачекати перед початком тривалості. Це значення записується в секундах із sсуфіксом (подобається 3s). transition-delayне є обов’язковим у transitionскороченні.

Спускові переходи

Ви можете запускати переходи CSS безпосередньо за допомогою псевдокласів, таких як :hover(активується, коли миша переходить над елементом), :focus(активується, коли користувач вкладає елемент, або коли користувач клацає вхідним елементом), або :active(активується, коли користувач натискає елемент ).

/* creating transitions directly in CSS */ .button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button:hover { background-color: #1ce; }

Ви також можете ініціювати перехід CSS через JavaScript, додавши або видаливши клас.

/* CSS */ .button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button.is-active { color: #1ce; } // JavaScript const button = document.querySelector('.button') button.addEventListener('click', _ => button.classList.toggle('is-active'))

Розуміння функції синхронізації переходів

transition-timing-functionУправляє тим, як відбувається перехід. Усі переходи мають значення linearза замовчуванням, що означає, що властивість змінюється рівномірно до кінця переходу.

.selector { transition: transform 1s linear; /* OR */ transition-property: transform; transition-duration: 1s; transition-timing-function: linear; }

Річ у тім, що в житті мало що рухається лінійно. Не так рухаються реальні предмети. Іноді ми прискорюємось; іноді ми сповільнюємось. transition-timing-functionДозволяє захоплювати все це.

Уявіть, як ви кидаєте тенісний м’яч у відкрите поле. М'яч залишає вашу руку з максимальною швидкістю. Під час руху він втрачає енергію, сповільнюється і врешті зупиняється. Це називається ease-out. Для цього існує функція синхронізації.

.selector { transition-timing-function: ease-out; }

А тепер уявіть, що ви в машині. Зараз це не рухається. Коли ви рухаєте машину, вона прискорюється та рухається до своєї максимальної швидкості. Це називається ease-in. Для цього також є функція синхронізації.

.selector { transition-timing-function: ease-in; }

Оскільки у вас є , ease-inі ease-out, є також функція часу , яка поєднує в собі два разом ease-in-out. (Я не раджу використовувати ease-in-outу ваших переходах, якщо ваші переходи не тривають довше секунди. Нічого не зменшується і не зменшується протягом секунди. Це просто виглядає дивним.)

.selector { transition-timing-function: ease-in-out; }

Див. Цю ручку для демонстрації функцій хронометражу, які ви вивчили до цього часу:

Нарешті, якщо вам не подобається жоден із наведених вище варіантів, ви можете створити власну функцію синхронізації за допомогою cubic-bezier.

Створення власної функції синхронізації за допомогою cubic-bezier

Cubic-bezier - це набір з чотирьох значень, які визначають вашу функцію синхронізації переходів. Це виглядає так:

.selector { transition-timing-function: cubic-bezier(x1, y1, x2, y2); }

Не турбуйтеся про x1, y1,, x2і y2. Ви ніколи не будете створювати криві кубічного безьє, пишучи цифри самостійно (якщо ви вже не знаєте, що вони означають, і не вдосконалите свою функцію синхронізації для вдосконалення).

Ви можете покластися як на Chrome, так і на надійні інструменти розробника Firefox, які допоможуть вам створити свої криві. Щоб використовувати його, ви додаєте transition-timing-functionелемент у елемент, а потім відкриваєте інструменти розробки та натискаєте на функцію синхронізації.

Перегляньте функції синхронізації переходу CSS Pen від Zell Liew (@zellwk) на CodePen.

Поглиблене створення власних кривих Безі для анімації виходить за рамки сьогоднішньої статті. Якщо ви зацікавлені, ви можете знайти більше інформації про криві кубічного-безьє в “Розуміння функцій синхронізації CSS” Стівена Грейга.

Перехід двох або більше властивостей

Ви можете перенести два (або більше) властивості CSS, розділивши їх комою у вашому transitionабо transition-propertyвластивості.

Ви можете зробити те ж саме з тривалістю, функціями синхронізації та затримками. Якщо значення однакові, потрібно вказати лише одне з них.

.selector { transition: background-color 1s ease-out, color 1s ease-out; /* OR */ transition-property: background, color; transition-duration: 1s; transition-timing-function: ease-out; }

У вас може виникнути спокуса перенести кожну властивість CSS за допомогою all. Ніколи цього не роби. Це погано для продуктивності. Завжди вказуйте властивість, яку ви намагаєтесь перенести.

/* DON'T EVER DO THIS */ .selector { transition-property: all; } /* ALWAYS DO THIS */ .selector { transition-property: background-color, color, transform; }

Перехід в проти переходу з

Іноді ви хочете, щоб властивості переходили і виходили по-різному. Ви хочете, щоб тривалість, функція синхронізації або затримки були різними.

Для цього ви пишете інший набір transition-властивостей.

.button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button:hover { background-color: #1ce; transition-duration: 2s; }

Коли ви пишете властивості переходу в класі запуску (псевдо), властивості переходу в класі запуску замінюють вихідні властивості переходу, які ви вказали в базовому класі.

Отже, у прикладі вище, коли ви наводите курсор на кнопку, колір фону займає 2 секунди, щоб змінити значення #33ae74на #1ce.

Коли ви наводите курсор на кнопку, для повернення кольору тла потрібно лише 0,5 с, #1ceтому що transition-duration2 з більше не існує.

Підведенню

Переходи CSS - це найпростіший спосіб виконання анімації. Ви можете створювати переходи або за допомогою transitionскорочення, або за допомогою transition-властивостей.

Щоб створити перехід, ви перезаписуєте властивість у класі (або класі psuedo), і ви вказуєте властивість для перенесення в transitionабо transition-property.

Не забудьте змінити свій, transition-timing-functionщоб ваша анімація виглядала більш реальною!

Якщо вам сподобалася ця стаття, вам сподобається вивчити Вивчення JavaScript - курс, який допоможе вам навчитися створювати реальні компоненти з нуля за допомогою JavaScript.

(О, до речі, якщо вам сподобалась ця стаття, я був би вдячний, якщо б ви могли поділитися нею.)

Спочатку опубліковано на zellwk.com.