Несоответствие перехода

Question

У меня есть несколько проблем с поведением перехода, возможно, это одна и та же проблема. Первый класс проблем с короткими переходами.

<style> 
.someclass { 
    transition: all 1s linear; 
} 
</style> 
<script> 
function activationcode() 
{ 
    //$('.someclass').hide(); was in display none state. 
    $('.someclass').css('opacity', 0); 
    $('.someclass').show(); 
    $('.someclass').css('opacity', 1); 
} 
</script> 

Добавить в большинстве случаев этот код не работает должным образом. Элемент .someclass отображается в конечном состоянии. Меняющееся свойство не имеет значения, например, opacity. Чтобы заставить его работать, две вещи помогают: а) изменить all для перехода к конкретному свойству, для этого примера - opacity; б) позвонить $('.someclass').css('opacity', 1); с задержкой, например, 100 мс. Но это только уменьшает вероятность проблемы до очень низкого значения, не исправляет ее.

Второй класс проблемы - для длительной анимации. Он работает, но если вы поместите его во вкладку (или что-то в этом роде) и начнете переключать с анимированной вкладки на другую, анимация может быть закончена в конечном состоянии до указанного времени. Одиночный переключатель/отключение обычно не прерывает анимацию. Но два или более переключателя имеют очень высокую вероятность.

Я могу воспроизвести это на Firefox (не совсем недавно). Первоначально сообщалось для Chrome (репортер заявляет, что использует последнюю версию).

Я подозреваю, что проблема зависит от количества операций css/js на странице (не удалось воспроизвести вторую проблему с минимальным jsfiddle).

Итак, вопрос в том, как исправить такие проблемы, существует ли какое-либо решение?

Answer 1

Место линия ...

$('.someclass').css('opacity', 1); 

... в setTimeout(fn, 0). Это отсрочит выполнение, гарантируя, что браузер не будет оптимизировать эти шаги в одну краску (покажите элемент со 100% непрозрачностью).

Answer 2

Я предлагаю вам использовать классы, а и обрабатывать показать/скрыть в CSS только

.hide { 
    display: none; 
    opacity: 0; 
    transition: opacity 1s linear 0s, display 0s linear 1s; 
    /* decrease opacity, then change display with a delay */ 
} 
.show { 
    display: block; 
    opacity: 1; 
    transition: display 0s linear 0s, opacity 1s linear 0s; 
    /* change display instantly without delay, then increase opacity */ 
} 

Затягивания скрытия для 1s, вы позволяете переход непрозрачности завершить до сокрытия его. Но мы сбросили задержку на показе, потому что нам нужны люди, чтобы увидеть непрозрачность.