javascript - 使 css 动画类在加载后重新加载

Question

所以这里的问题是，当点击第一个按钮时，如何让“fadeInUpBig”类重新加载。

因此，如果您单击任何按钮，该类就会被添加并且可以正常工作。

但是如果我然后想点击另一个按钮并让类有效地重新加载它不会并且只是呈现与另一个按钮相关联的不同颜色而没有“fadeInUpBig”

一些人试图帮助解决这个问题，但没有人高兴。请帮忙 !

我在这里提供了一个jsfiddle http://jsfiddle.net/greggy_coding/uvb4qp2m/11/

这个的html是...

<h2 class="iconM-testimonials text-center">What is </h2>
<h2 class="iconM-referrals text-center">What is Music </h2>


    <div id="colorscreen" class="animated"> </div>

非常简单!

CSS 非常简单，就在这里...

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 1s; 
    animation-delay: 1s;
}


#colorscreen{ 
  position: fixed;
  top: -20px;
  left : -50px ;
  width: 150%;
  height: 150%;
  z-index: -1500;
  color: #FFF;
  overflow : hidden ;

   }

  @-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 1000px, 0);
    transform: translate3d(0, 1000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 1000px, 0);
    transform: translate3d(0, 1000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;

}
h2 {
  font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #000000;
  letter-spacing: 0.00em;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.01em;


}

最后两个按钮的 javascript 在这里...

$('.iconM-testimonials').on('click', function () {
     $("#colorscreen").removeClass("fadeInUpBig").addClass("fadeInUpBig");
      $('.fadeInUpBig').css('background-color', 'rgba(164, 196, 0, 0.2)');
        $(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("musability-musictherapy-company-overview.html");


});


$('.iconM-referrals').on('click', function () {
     $("#colorscreen").removeClass("fadeInUpBig").addClass("fadeInUpBig");
      $('.fadeInUpBig').css('background-color', 'rgba(183, 192, 26, 0.8)');
        $(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("musability-musictherapy-company-overview.html");


});

问题的核心似乎在于脚本的 removeclass 和 add class 行，因为它似乎没有做任何事情，在第二个按钮上单击它只是更改与该按钮关联的颜色。 #pullingmyhairout

Answer 1

正如我在评论中所述，动画没有重新启动的原因是浏览器在方法调用之前和之后没有看到元素类的任何变化。所以，它实际上并没有删除然后添加类；它只是让它开着。欺骗浏览器应用您想要的更新的一种方法是在 setTimout 调用中添加类:

$('.iconM-testimonials').on('click', function () {
    $("#colorscreen").removeClass("fadeInUpBig");
    setTimeout(function(){
        $("#colorscreen").addClass("fadeInUpBig");
        $('.fadeInUpBig').css('background-color', 'rgba(164, 196, 0, 0.2)');
    }, 1);
    $(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("musability-musictherapy-company-overview.html");
});