jquery - jQuery - 在CSS动画中,如何设置visibility:hidden然后,visibility:visible?


.logos2{


 position: relative;


 float: right;


 height:100%;


 right:75px;


 animation: move 1s;


 animation-play-state:paused;


 border: 1px solid #000;


}



在jQuery中:


jQuery(document).ready(function(){


jQuery(".logos").animate({height: +800}, 500);


 jQuery(".logos").promise().done(function(){


 jQuery(".logos2").css({"animation-play-state":"running"});


 });


}); 




jQuery(document).ready(function(){



 jQuery(".logos").animate({height: +800}, 500);


 jQuery(".logos").promise().done(function(){


 jQuery(".logos1").addClass('logos2');


 });



 }); 




我希望我的CSS动画先被隐藏(让另一个动画运行),然后在动画显示之后被隐藏。

下面是我的CSS代码:





.logos{ 


 position: absolute;


 width:100vw;


 margin:0 auto;


 height:0vh;


 bottom: 0;


}


.logos1{



 position: relative;


 float: right;


 height:100%;


 top: 100px;


 right:75px;


 visibility: hidden;


 border: 1px solid #000;


}



@keyframes move{


 0%{right:-100px;}


 50%{right:90px;visibility: hidden;}


 100%{right:75px;visibility: visible}


}



.logos2{



 position: relative;


 float: right;


 height:100%;


 top: 100px;


 right:75px;


 animation: move 1.5s; 


 animation-delay: 1s;


 border: 1px solid #000;


}



我的jQuery


jQuery(document).ready(function(){



 jQuery(".logos").animate({height: +800}, 500);


 jQuery(".logos1").height(100);


 jQuery(".logos1").promise().done(function(){


 jQuery(".logos1").addClass('logos2');


 jQuery(".logos2").removeClass('logos1'); 


 jQuery(".logos2").promise().done(function(){


 jQuery(".logos2").css('visibilty','visible');


 })


 })


 }); 



当我运行jquery时,动画在开始时就可见。

谁知道怎么解决?

时间:

可以尝试将不透明度从0过渡到1.

有关详细信息,请参阅有可见性的CSS过渡不起作用

...