Коли ми згадуємо CSS в дискусіях, ми часто говоримо про нього як про неповноцінному мовою. Декларативний мову, позбавлений логіки і розуміння; Але це не зовсім справжня реальність. Протягом багатьох років розробники жадали отримати можливість використовувати змінні в стандартному CSS, які так довго були доступними з препроцесора, такими як LESS і Sass. Мало того, що змінні CSS є реальним і відчутним для розробників, вони також можуть використовуватися в сценаріях анімації. Все ще налаштовані скептично? Дотримуйтесь далі, щоб дізнатися більше!
основи змінних
Змінні CSS - це збережені значення, призначені для повторного використання в таблиці стилів. Вони доступні з використанням користувальницької функції var () і задаються з використанням користувальницької нотації властивостей.
Змінні, визначені в: root. є глобальними, тоді як змінні, визначені в селекторі, є специфічними для цього селектора.
У наведеному вище прикладі будь div приймає змінну, але ми могли б більш точно визначити найменування, використовуючи методи таргетингу, такі як class або наприклад id.
Функція var () також може приймати значення повернення.
Це може бути корисно в ситуаціях, коли змінна ще не визначена або при роботі з налаштованим елементами і Shadow DOM.
Змінні CSS не зовсім готові для прайм-тайму, але перспективи на майбутнє, багато провідних браузери вже реалізують специфікацію. Це тільки питання часу, поки вони не можуть бути використані без будь-яких турбот, і цей час наближається швидко.
Змінні для анімації
- Легко налагоджували.
- Ніяких надмірних маніпуляцій з DOM.
- Незалежний від вузлів DOM.
- тематизация
- Працює з SVG.
Операції в CSS дійсно є ключовою частиною всієї головоломки з анімацією. Функції CSS, такі як calc. можуть приймати значення під час виконання і виконувати такі оператори, як множення, ділення, додавання, віднімання, зміна значень. Це дозволяє робити змінні CSS динамічними.
Методи, показані вище, використовуються для установки, отримання і видалення значень властивостей. Вони можуть використовуватися для наших типових властивостей CSS (background-color. Font-size і т.д.), Але вони також можуть використовуватися і для змінних CSS. Ці параметри будуть встановлювати нове значення для глобально певного властивості, інакше відомого як: root в CSS.
Вони також є справжнім відкриттям для анімації за допомогою змінних CSS, тому що наші методи JS можуть отримувати, встановлювати або видаляти змінну під час виконання динамічно!
Ви також можете встановити нове значення для певного елемента. У наведеному вище фрагменті прикладу ми маніпулюємо змінної, яка прив'язана до селектору div. а не до глобально.
демонстрація
Є безліч дивовижних і надзвичайно талановитих розробників, які використовують і експериментують з цими концепціями реактивної і тематичної анімації, використовуючи змінні CSS. Ось тільки кілька прикладів, щоб пірнути в і дізнатися, що відбувається під капотом.
Захід / схід
Цей приклад показує міць анімації змінних CSS, використовуваних для створення теми. Як правило, знадобилося б в два рази більше коду для виконання цієї демонстрації без використання змінних CSS і у багато разів більше, якщо ви хочете використовувати більше двох тем.
Анімація змінними CSS
Алекс CSS Husky
Ось той же принцип, який був продемонстрований вище, але використовується в іншому контексті.
Зауважте, що відбувається, коли ви рухаєте мишею? Досить круто, да?
Анімація за допомогою CSS-змінних
А що на рахунок зміни значень змінних іншими способами? Давайте поглянемо на наступне демо Уес Бос, в якому використовуються повзунки, щоб оновити позиції зображення.
Рухайте повзунки у вільний час. Зверніть увагу на прохолоду, яка настає? Просто, але просто чарівно, а це просто оновлюються змінні для позиції перетворення при кожній зміні повзунків. Suuuuhhhweeet!
Single Div Accordion (анімовані з CSS-змінними)
Як щодо чогось іншого для музикантів? Подивіться на цей хіп-акордеон Дена Уїлсона.
Змінні CSS + Transform = Індивідуальні властивості (з входами)
У цій демонстрації використовуйте діапазони введення для зміни кожного властивості перетворення і переконайтеся в тому, наскільки вони плавні, навіть якщо ви змінили середній перехід властивості.
Побічні ефекти CSS-змінних
Оскільки змінні CSS завжди є успадкованими властивостями, вони можуть викликати перерахунок стилю для дочірніх елементів, негативно впливаючи на продуктивність в цьому процесі. Це ви повинні будете виміряти в залежності від вашого контексту.
Huh, здається, зміна змінних CSS на елементі викликає перерахунок стилю для _all_ його дочірніх елементів. Упс. pic.twitter.com/jvpDT5UB2h
Під час тестів (Chrome 58. Mac 10.12) було виявлено, що коли кнопка Set CSS Var спрацьовує доти, поки браузер не зафарбувати фон, буде витрачено 52.84 мс часу на recalc і 51.8ms рендеринга. Перемикання налаштувань в тесті CSS Property показує зовсім інший результат. З моменту натискання кнопки «Встановити CSS-властивість» до тих пір, поки фон не буде пофарбований, проходить приблизно 0,43 мс recalc і 0,9 мс рендеринга.