Найпростіший (і найпростіший) спосіб анімувати ваші компоненти - це 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.