olegafx Jun 10 2013 at 18:05

«Continuous page repainting и отладка перерисовки страницы» в Chrome Dev Tools

3 min

12K

Website development*CSS*Google Chrome

Tutorial

+53

Comments 4

mu3 Jun 13 2013 at 07:34

Проголосовало 390 человек и ни одного комментария?!
По делу: из enewsey.ru вы уже убрали translateX? Увидел только у поискового input.
И можно ли в DevTools искать DOM объекты по CSS свойству? Например, по тому же «translateX».

olegafx Jun 14 2013 at 12:17

Ничего не убирал. Просто оно лежит в ng-animate у AngularJS.
Искать — не видел такого.

mu3 Jun 14 2013 at 12:58

Так у киках объектов выставлен translateX?
Перебрал все повторяющиеся, ни у кого не увидел.
Да и не смог достичь таких медленных fps, поэтому подумал, что уже убрали translateX (возможно, просто для OSX это лучше оптимизировано)

olegafx Jun 14 2013 at 15:16

У всех, у которых указана директива ng-animate. Это все li в ul.

<li data-ng-repeat="article in articles | filter:{author:predicate} | filter:search | orderBy:'-date'" data-ng-animate="{enter: 'fadeIn', leave: 'fadeOut'}">

.fadeIn, .fadeIn-active, .fadeOut, .fadeOut-active {
    -webkit-transition: all linear .5s;
    -moz-transition: all linear .5s;
    -o-transition: all linear .5s;
    transition: all linear .5s;
}

.fadeIn {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
}

.fadeIn-active {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.fadeOut {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.fadeOut-active {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
}

Show the best of all time