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

У меня есть вопрос о скорости рендеринга для свойства перехода 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 должен искать «все» свойства перехода, даже если для элемента есть только одно свойство, это может замедлить процесс.

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

64 голоса | спросил j-man86 21 Jam1000000amSat, 21 Jan 2012 00:25:31 +040012 2012, 00:25:31

2 ответа


0

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

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

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

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

ответил kizu 22 Jpm1000000pmSun, 22 Jan 2012 21:01:04 +040012 2012, 21:01:04
0

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

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

.nav a {
  transition: color .2s, text-shadow .2s;
}
ответил Duncan Mckenna 20 J0000006Europe/Moscow 2014, 12:32:23

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132