Не удается настроить переход CSS3, чтобы разрешить выделение в одну секунду - PullRequest
Новая
       10

Не удается настроить переход CSS3, чтобы разрешить выделение в одну секунду

0 голосов
/ 12 мая 2011

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

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

<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>

Ответы [ 2 ]

1 голос
/ 13 мая 2011

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

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

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

0 голосов
/ 12 мая 2011

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

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);
}
...