Переходы CSS3: «переход: все» медленнее, чем «переход: х»?

Question

У меня есть вопрос о скорости рендеринга для свойства перехода css3.

Предположим, у меня есть несколько элементов:

div, span, a {transition: all}

div {margin: 2px}
span {opacity: .5}
a:hover {background-position: left top}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

Намного эффективнее настроить все переходы для всех этих элементов, используя одно объявление div, span, a {transition: all}. Но мой вопрос: будет ли это «быстрее» с точки зрения плавности и быстроты рендеринга анимации для целевого свойства перехода каждого элемента? Например:

div {margin: 2px; transition: margin .2s ease-in}
span {opacity: .5; transition: opacity .2s ease-in}
a {background-position: left top; transition: background .2s ease-in}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

Моя логика заключается в том, что если «движок» css должен искать «все» свойства перехода, даже если для элемента есть только одно свойство, это может замедлить процесс.

Кто-нибудь знает, так ли это? Спасибо!

Answer 1

Да, использование transition: all может вызвать серьезные недостатки в производительности.Там может быть много случаев, когда браузер будет искать, если ему нужно сделать переход, даже если пользователь не увидит его, например, изменения цвета, изменения размера и т. Д.

Самый простой пример, который я могу себе представитьиз этого: http://dabblet.com/gist/1657661 - попробуйте изменить уровень масштабирования или размер шрифта, и вы увидите, что все становится анимированным. Конечно, таких взаимодействий с пользователем не может быть много, но могут быть некоторыеизменения интерфейса, которые могут вызвать перекомпоновку и перерисовку в некоторых блоках, которые могут указывать браузеру, чтобы они пытались анимировать эти изменения.

Так что, в общем, рекомендуется не использовать transition: all ивместо этого используйте прямые переходы.

Есть некоторые другие вещи, которые могут пойти не так с переходами all, например всплеск анимации при загрузке страницы, когда он сначала визуализирует начальные стили для блоков, а затемприменить стиль с анимацией.Во многих случаях это не то, что вы хотите:)

Answer 2

Я использовал all для случаев, когда мне нужно было анимировать более одного правила. Например, если я хотел изменить color & background-color на :hover.

Но оказывается, что для переходов можно настроить более одного правила, поэтому вам никогда не нужно нужно , чтобы прибегнуть к настройке all.

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