анимация непрозрачности не работает, если я не использую setTimeout - PullRequest
Новая
       47

анимация непрозрачности не работает, если я не использую setTimeout

0 голосов
/ 21 сентября 2019

Может кто-нибудь объяснить, почему следующий код не работает без setTimeout? 

<html>
 <script src="js/jquery.js"></script>
 <style> 
div {
 height:400px;
 background-color:red;
 opacity:1;
 transition:1s;
}
</style> 
<div id="foo">toto</div>

<script>
                        $("#foo").css("transition","0s");
                        $("#foo").css("opacity",0);
                        setTimeout(function(){
                            $("#foo").css("transition","5s");
                            $("#foo").css("opacity",1);             
                        },1);
</script>
</html>

Предполагается, что сценарий сбрасывает непрозрачность div до 0, а затем постепенно достигает максимальной непрозрачности через 5 секунд.Без таймера нет анимации: непрозрачность равна 1. Я знаю, что я мог бы использовать кадры для анимации, но это было первое, что выходило у меня из головы в то время, и теперь мне интересно, почему это не работает (безтаймер)

рабочий (с таймером)

$("#foo").css("transition","0s");
	$("#foo").css("opacity",0);
  	setTimeout(function(){
		$("#foo").css("transition","5s");
		$("#foo").css("opacity",1);				
	},1);
div {
 height:400px;
 background-color:red;
 opacity:1;
 transition:1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="foo">toto</div>

Не работает

$("#foo").css("transition","0s");
	$("#foo").css("opacity",0);

		$("#foo").css("transition","5s");
		$("#foo").css("opacity",1);				
div {
 height:400px;
 background-color:red;
 opacity:1;
 transition:1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="foo">toto</div>

1 Ответ

0 голосов
/ 21 сентября 2019

Просто потому, что ваш скрипт выполняется одновременно с рендерингом страницы, что означает, что ваша страница отображается с этими стилями, поэтому изменений нет, а затем нет перехода, при добавлении setTimeout вы задерживаете измененияпосле рендеринга запускается анимация перехода css.

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

_ Если выхотите чистое решение CSS, следуйте этой теме: анимация перехода css3 при загрузке, без JavaScript? 

$(window).on('load', function () {
  $("#foo").css("opacity",1);        
});
div {
 height:400px;
 background-color:red;
 opacity:0;
 transition:5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="foo">toto</div>
...