Блог

Я пытаюсь отказаться от JavaScript на основе setTimeout в пользу перехода CSS для выделения в одну секунду. Вместо мгновенного изменения цвета фона или даже перехода между двумя цветами фона, я бы хотел сначала сразу переключиться на желтый, а затем перейти к нужному цвету.

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

Очевидно, что мне нужно структурировать вещи по-другому, чтобы достичь этого. Я, должно быть, не понимаю основ того, когда переходы действительно происходят при подключении к классам, которые добавляются и удаляются.

 <style>
.highlight  { background-color: yellow; }
.selected   { background-color: black; -moz-transition: background-color 2s linear; }
</style>

<div id="samp" onclick="flash();">SAMPLE</div>

<script>
function flash() {
    document.getElementById("samp").className = "highlight";
    document.getElementById("samp").className = "selected";
}
</script>
  

После консультации с IRC было определено, что основной причиной этого был браузер, ожидающий завершения блока скрипта, прежде чем пытаться перерисовать. Это было так, как будто highlight класс никогда не применялся. По этой причине решение Lea, приведенное выше, фактически работает, если время ожидания увеличивается. Точное время ожидания, которое срабатывает, должно зависеть от интервала перерисовки.

Я искал способы принудительного перерисовывания и наткнулся на сообщение в блоге Opera, предупреждающее против измерения, поскольку это вызывает перерисовку. Простая вставка var x = document.getElementById("samp").offsetWidth; параметра между двумя строками className приводит к тому, что он начинает переход с желтого на желаемый.

Что я нахожу интересным, так это то, что оптимизация, выполняемая как Webkit, так и Gecko — ожидание перерисовки до завершения блока сценария — разумно, когда выполняемые действия в основном не имеют состояния, как CSS. То есть, независимо от того, сколько изменений внесено, браузер может отбросить все предыдущие стили и корректно применить последний. Однако с переходами CSS стал с отслеживанием состояния, и эта оптимизация фактически дает совсем другие результаты, чем если бы она была отключена.

Вам нужно переключать класс с таймаутом:

 function flash() {
    document.getElementById("samp").className = "highlight";

    setTimeout(function(){
        document.getElementById("samp").className = "selected";
    }, 10);
}
  

кроме того, это оффтопик, но хорошей практикой является избегать избыточных запросов DOM и элементов кэша в переменных:

 function flash() {
    var samp = document.getElementById('samp');

    samp.className = "highlight";

    setTimeout(function(){
        samp.className = "selected";
    }, 10);
}