jquery - 如何设置可见性:hidden then visibility:visible in a CSS animation?

Question

编辑 3 实际上，我根本不需要弄乱可见性/不透明度...所以我删除了那些行(如编辑 2 所示)...添加了动画 -播放状态:暂停/运行....

得到了我想要的效果...

---

编辑 2:感谢 Gineto 的想法!进行了一些更改(见下文):

.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 已经接近:

jQuery(document).ready(function(){

    jQuery(".logos").animate({height: +800}, 500);
    jQuery(".logos").promise().done(function(){
      jQuery(".logos1").addClass('logos2');
    });

  }); 

但是添加一个class动态shift是logo很多...

---

我希望我的 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 时发生的是动画在开始时可见...

谁知道怎么解决？

Answer 1

尝试将不透明度从 0 过渡到 1。

参见:CSS transition with visibility not working了解更多详情