Стислий стенд CSS з кількома властивостями?


519

Я не можу знайти правильний синтаксис для стенограми переходу CSS з кількома властивостями. Це нічого не робить:

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

Я додаю шоу-клас за допомогою JavaScript. Елемент стає вищим і видимим, він просто не переходить. Тестування в останніх Chrome, FF та Safari.

Що я роблю неправильно?

EDIT: Просто для того, щоб було зрозуміло, я шукаю скорочену версію, щоб зменшити свій CSS. Він досить роздутий з усіма префіксами постачальника. Також розширили приклад коду.


2
Перевірте цю документацію. developer.mozilla.org/uk/CSS/CSS_transitions
websymphony

3
Ви фактично змінюєте значення висоти та непрозорості? Інакше вони не змінюються
yunzen

Я не надто добре розбираюся з переходами CSS - чи є подвійні .5sзначення після opacityзапланованих?
BoltClock

Документація не дає приклад використання скороченої версії з декількома властивостями. Зміна висоти від 0 до 200 пікселів, непрозорість від 0 до 1. Друга .5s - це затримка переходу непрозорості. Я хочу, щоб елемент зростав у висоту, і коли це буде закінчено, в’януть його.
Григорій Болкенштійн

2
Ага так, значення затримки.
BoltClock

Відповіді:


752

Синтаксис:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

Зауважте, що тривалість повинна бути до затримки, якщо вона вказана останньою.

Індивідуальні переходи, об'єднані в коротких деклараціях:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

Або просто перехід їх усіх:

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

Ось напростий приклад . Ось ще одна із властивістю затримки .


Редагувати: раніше перераховані тут були сумісність та відомі проблеми щодо transition. Видалено для читання.

Підсумок: просто використовуйте його. Характер цього властивості є неперервним для всіх програм і сумісність зараз значно вище 94% у всьому світі.

Якщо ви все ще хочете бути впевненими, зверніться до http://caniuse.com/css-transitions


1
Ви пробували це? Це не працює для мене. Я також не можу використовувати все майно, оскільки у мене затримка другого ресурсу.
Григорій Болкенштійн

3
Чи є якісь ефективність / пам'ять / інші наслідки для використання allзамість перерахування конкретних властивостей? Наприклад, якщо я планую перехід backgroundі colorтільки - чи краще мені вказати обидва, або просто використовувати all? Крім того - враховуючи, що IE6-9 не підтримує переходи, а IE10 підтримує їх нефіксовано - чи є перевага / недолік включення ms-transition:директив?
mattstuehler

9
Однозначно є вплив на ефективність при переході всіх властивостей, а не просто потрібного. Це може завдати серйозної шкоди, якщо у вас багато елементів, які переходять усі властивості одночасно. Про ms-transition, я не знаю жодної причини, тепер, коли IE10 вийшов, чому хтось все-таки використовуватиме ms-transitionзамість стандарту transition. Це не спричинить жодних проблем, але це, особливо на важкому перехідному аркуші стилів, роздує ваш CSS. Що ще важливіше, розмір файлу також вразить.
Ремі Бретон

3
У мене була така сама проблема, і виявилося, що використання "переходу: непрозорість 1s .5s, max-висота .5s 0" не працює, поки "перехід: непрозорість 1s .5s, max-height .5s 0s". Перший раз я бачу одиницю, необхідну для нульового значення в css!
mlarcher

5
Варто зазначити, що використовувати "все" повільніше, ніж вказувати конкретні властивості.
Натан

433

Якщо у вас є кілька специфічних властивостей, які ви хочете перейти таким же чином (оскільки у вас є також деякі властивості, які ви спеціально не хочете переходити, скажімо opacity), інший варіант - зробити щось подібне (префікси опущені для стислості):

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

Друга декларація перекреслює декларацію allскорочень, що над нею, і робить (іноді) більш стислий код.

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}
<p>Hover box for demo</p>
<div class="box"></div>

Демо


4
Це корисно! Не тільки через transition-propertyпереосмислення, але й тому, що, наприклад, transition-delayпотрібно вказати після скорочення (принаймні, у веб-програмі). Іншими словами, стенограма передбачає transition-delayзначення 0 і встановлення окремої затримки до того, як стенограма встановить його назад до 0.
duncanwilcox

@duncanwilcox ви можете робити transition: [props] [duration] [easing] [delay] в кожному сучасному браузері
Jason

9
Віддайте перевагу цій відповіді СТОЛЬКІ більше прийнятої відповіді.
Erutan409

3
чудовий! дуже подобається підхід!
wasddd_


2

Маючи затримку .5s на перехід властивості непрозорості, елемент буде повністю прозорим (і, таким чином, невидимим) весь час, коли його висота переходить. Тож єдине, що ви насправді побачите, - це непрозорість, що змінюється. Таким чином, ви отримаєте той самий ефект, що й у відсутності властивості висоти поза переходу:

"перехід: непрозорість .5s .5s;"

Це те, чого ти хочеш? Якщо ні, і ви хочете побачити перехід висоти, ви не можете мати непрозорість нуля протягом усього часу, коли він переходить.


Це також не працює, оскільки висота залишиться 0 під час переходу непрозорості.
Xesau

0

Це допомогло мені зрозуміти / впорядкувати лише те, що мені потрібно було анімувати:

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {
  max-width: 0vw;
  opacity: 0;

  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;

  &:hover {
    max-width: 100vw;
    opacity: 1;

    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

~ Це стосується всіх властивостей переходу (тривалість, функція синхронізації часу тощо) у класі '.base'


-4

Я думаю, що з цим працювати:

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.