Question

所以这里的问题是如何才能获得课程＆＃34; fadeInUpBig＆＃34;单击另一个按钮时重新加载。

因此，如果您单击任何按钮，该类将被添加并正常工作。

但是，如果我想点击另一个按钮并使该类重新加载它并不会只显示与另一个按钮相关联的不同颜色，而不是＆＃34; fadeInUpBig＆＃34;

有些人试图帮助这个，但没有快乐。请帮忙！

我在这里提供了一个jsfiddle

这是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");


});

问题的核心似乎在于删除类并添加脚本的类行，因为它似乎没有做任何事情，而在第二个按钮上单击它只是更改与该按钮关联的颜色。 #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");
});

Answer 2

我认为这应该有效。

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


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

一旦已加载css动画类重新加载

2 个答案: