Як мати кілька переходів CSS на елементі?


327

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

    .nav a
{
    text-transform:uppercase;
    text-decoration:none;
    color:#d3d3d3;
    line-height:1.5 em;
    font-size:.8em;
    display:block;
    text-align:center;
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    transition: text-shadow .2s linear;
}

.nav a:hover
{
    color:#F7931E;
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

Як бачимо, перехідні властивості перезаписуються на інше. Наразі, текстова тінь буде оживляти, але не колір. Як змусити їх обох одночасно оживляти? Дякую за будь-які відповіді.


Не забувайте, що transition: allце дуже баггі для сафарі / ipad: joelglovier.com/writing/…
Oğuzhan Kahyaoğlu

Відповіді:


583

Властивості переходу розділені комами у всіх браузерах, які підтримують переходи:

.nav a {
  transition: color .2s, text-shadow .2s;
}

easeє функцією синхронізації за замовчуванням, тому не потрібно її вказувати. Якщо ви дійсно хочете linear, вам потрібно буде вказати це:

transition: color .2s linear, text-shadow .2s linear;

Це починає повторюватися, тому, якщо ви будете використовувати однакові функції та функції синхронізації у кількох властивостях, краще продовжувати використання та використовувати різні transition-*властивості замість скорочення:

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

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

1
Як загальний коментар щодо переходів у CSS, слід пам’ятати, що встановлення декількох визначень переходу одне за одним не буде працювати, а для цього вони повинні бути в тому ж визначенні (як тут у СА). До основних правил CSS застосовується правило "останнє", тому, якщо в окремих рядках є кілька визначень, буде застосовано лише останнє визначення. FYI
TheCuBeMan

37

Ви також можете просто значно:

.nav a {
    -webkit-transition: all .2s;
}

44
Ви можете фактично видалити "все", оскільки це за замовчуванням, якщо не вказано інше.
joshnh

13
+1 за відмінний момент, але я думаю, що корисно тримати його там, особливо для послідовності та взаєморозуміння між командами.
XML

4
Остерігайся цього! Якщо розробка для мобільних пристроїв, у поєднанні з елементами, прискореними апаратними засобами, робить нові пристрої глюкозними, а старі пристрої - непридатними.
Ілля Карнаухов

2
Дякую, @ CanerŞahin. Чи можете ви надати будь-яку документацію чи інструменти порівняльного аналізу, які допоможуть людям зрозуміти цей момент? Крім того, чи бачите ви докази, які показують, що "все" гірше, ніж взагалі не використовувати специфікатора?
XML

3
@XML У тому, як це було пояснено, є два негативних наслідки. 1, браузер додає додаткові ресурси завдяки використанню "всіх". Веб-переглядач уважно слухатиме цей елемент, очікуючи будь-яких змін, які є менш ефективними та можуть створити невідомі сторінки. 2, може створити несподівані ефекти, якщо пізніше розробник розмістить фоновий колір, який потім буде перенесений, який може не очікувати або вимагати.
Стефан Берт

29

Щось таке, що дасть змогу одночасно робити кілька переходів:

-webkit-transition: color .2s linear, text-shadow .2s linear;
   -moz-transition: color .2s linear, text-shadow .2s linear;
     -o-transition: color .2s linear, text-shadow .2s linear;
        transition: color .2s linear, text-shadow .2s linear;

Приклад: http://jsbin.com/omogaf/2


24

Якщо ви зробите всі анімаційні властивості однаковими, ви можете встановити кожен окремо, що дозволить вам не повторювати код.

 transition: all 2s;
 transition-property: color, text-shadow;

Більше про це тут: CSS-скорочення переходу з кількома властивостями?

Я б уникнув використання властивості all (перехідна властивість перезаписує "все"), оскільки у вас може виникнути небажана поведінка та несподівані звернення до продуктивності.



1

Ось МЕШЕ міксин для переходу двох властивостей одночасно:

.transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) {
 -webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
    -moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
      -o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
          transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
}

автопрефіксатор ще приємніший!
переписано

автопрефіксатор + стилус FTW.
Джейсон Лідон

1

Можна встановити кілька переходів з різними значеннями для тривалості, затримки та функції часу. Для розділення різних переходів використовуйте,

button{
  transition: background 1s ease-in-out 2s, width 2s linear;
  -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
}

Довідка: https://kolosek.com/css-transition/


0

Також можна уникнути загального вказівки властивостей.

#box {
  transition: 0.4s;
  position: absolute;
  border: 1px solid darkred;
  bottom: 20px; left: 20px;
  width: 200px; height: 200px;
  opacity: 0;
}

#box.on {
  opacity: 1;
  height: 300px;
  width: 500px;
 }
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.