CSS3 переходы: является ли" переход: все "медленнее, чем"переход: x"?

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

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

2 63
css css3 performance css-transitions

2 ответа:

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

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

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

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

54

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

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

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