Як застосувати перехід CSS3 до всіх властивостей, крім позиції фону?


108

Я хотів би застосувати перехід CSS до всіх властивостей, крім позиції фону. Я намагався зробити це так:

.csstransitions a {
    -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;
}

.csstransitions a {
    -webkit-transition: background-position 0s ease 0s;                 
    -moz-transition: background-position 0s ease 0s;                
    -o-transition: background-position 0s ease 0s;  
    -ms-transition: background-position 0s ease 0s;         
    transition: background-position 0s ease 0s;
}

Спочатку я встановив усі властивості на перехід, а потім спробував замінити лише перехід для властивості background-position.

Однак, схоже, це також скидає всі інші властивості - так, здається, жоден із переходів більше не відбувається.

Чи є спосіб це зробити без перерахування всіх властивостей?


1
Привіт, я насправді шукаю це питання. Ви отримали якусь прийнятну відповідь?
Milche Patern

Відповіді:


143

Ось рішення, яке також працює на Firefox:

transition: all 0.3s ease, background-position 1ms;

Я зробив невеличку демонстрацію: http://jsfiddle.net/aWzwh/


3
Чомусь 1msне працювали для мене, але так і 0робили.
Flimm

@Flimm, який браузер ви використовуєте? І що ви маєте на увазі під "не працював", нічого не оживляв?
Фелікс Едельман

1
Для мене 1msне працювало, але так 1ms none! @ericsoco 0msабо також 0sпрацює.
BCoder

3
Одиниці часу ОБОВ'ЯЗКОВО мають одиницю. Так 0 не працює так, як 4 не працюватиме, але 4 будуть працювати так, як працюватимуть 0.
ESR

2
Я так довго шукав це, дякую, @FelixEdelmann !!
тацу

17

Сподіваюсь, що не спізниться. Це здійснюється за допомогою лише одного рядка!

-webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 

Це працює в Chrome. Ви повинні розділити властивості CSS комою.

Ось робочий приклад: http://jsfiddle.net/H2jet/


6
Я пробую це на Chrome, і, здається, це не працює на мене. allПерехід-властивість , здається , не перекриває всі інші , незалежно від того , що.
animuson

2
Цікаво. Я думаю, я не перевіряв його з іншими властивостями. Коли я спробував, color 0це спрацювало, але це, звичайно, не працює background-position 0. Навіть background 0не дає результатів для мене ... Ось jsFiddle я сфабрикував з меню Gaming.SE. Якщо чесно, я лише background-positionспочатку протестував, бо саме це питання конкретно згадує, і саме я намагався змінити себе.
animuson

2
Раніше вона працювала над хромом. Він все ще працює в IE11, але станом на цьому тижні все майно тепер перекриває будь-що пізніше.
цир

1
Як сказав @cirrus, Chrome більше не враховує тривалість 0 секунд, але ви можете змусити його працювати, даючи натомість дуже коротку тривалість, як-от.1ms
GetFree

1
Це працює як на Chrome, так і на Firefox, якщо надається ненульова секунда.
Найшель Вердхан

4

Спробуйте це...

* {
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
}
a {
    -webkit-transition: background-position 1ms linear;
    -moz-transition: background-position 1ms linear;
    -o-transition: background-position 1ms linear;
    transition: background-position 1ms linear;
}

"Спробувати це" відповіді лише для коду не найкращі. Краще кілька пояснень того, що ти робиш.
random_user_name


2

Для того, щоб хтось шукав скорочений шлях, щоб додати перехід для всіх властивостей, крім однієї конкретної властивості із запізненням , пам’ятайте про наявність відмінностей навіть у сучасних браузерах.

Проста демонстраційна демонстрація нижче показує різницю. Перевірте повний код

div:hover {
  width: 500px;
  height: 500px;
  border-radius: 0;
  transition: all 2s, border-radius 2s 4s;
}

Chrome "поєднає" дві анімації (як я очікую), як нижче:

введіть тут опис зображення

Хоча Safari "відокремлює" це (чого не можна очікувати):

введіть тут опис зображення

Більш сумісний спосіб полягає в тому, що ви призначаєте певний перехід для певної властивості, якщо у вас є затримка для одного з них.


Справді. Це критичне розуміння. Оскільки кульга полягає в тому, що потрібно вказати кожну властивість окремо, а не allкорисно знати, що це єдиний спосіб отримати бажану поведінку в браузерах.
random_user_name

1

Спробуйте:

-webkit-transition: all .2s linear, background-position 0;

Це працювало для мене на щось подібне ..


фіксація фону-позиції до 0 не = видалення переходу з фону-позиції. Чи не так?
Мілче Патерн

1
Це ніколи не може працювати. Повторно визначивши властивість переходу згодом, ви повністю перекриєте попередню властивість переходу, як ніби вона ніколи не існувала. Вони не консолідуються.
animuson
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.