使用jQuery重新启动已经隐藏且透明的动画

Question

我有一个CSS动画，它同时从可见变为隐藏，从实体变为透明。 我的问题是，这是一个动画，单击按钮时需要显示它。 当实际的隐藏和淡入由CSS而不是jQuery执行时，如何在点击时触发事件？ 例如，当单击Div'One'时，我希望覆盖播放一次。 单击其他div时相同。 我似乎无法解决问题，帮助会很棒！

 $(".btn").click(function() { var el = $(".overlay"), newone = el.clone(true); el.before(newone); $("." + el.attr("class") + ":last").remove(); }); 

 .overlay { position: fixed; top: 0; left: 0; height: 100%; width: 100%; display: table; background-color:rgb(39, 174, 96); z-index: 10; } h1.thank-you-message { font-size:12.0rem;display: table-cell; color:#fff; text-align: center; vertical-align: middle;-webkit-perspective: 1000;-webkit-font-smoothing: antialiased;} .animated-thank-you { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes fadeOutScale { 0% {visibility:visible; opacity: 1;transform: scale(1); /* CSS3 */ -moz-transform: scale(1); /* Firefox */ -webkit-transform: scale(1); /* Webkit */ -o-transform: scale(1); /* Opera */ -ms-transform: scale(1); /* IE 9 */} 40% {opacity: 1;transform: transform: scale(0.75); /* CSS3 */ -moz-transform: scale(0.75); /* Firefox */ -webkit-transform: scale(0.75); /* Webkit */ -o-transform: scale(0.75); /* Opera */ -ms-transform: scale(0.75); /* IE 9 */} 60% {opacity: 1;transform: transform: scale(0.75); /* CSS3 */ -moz-transform: scale(0.75); /* Firefox */ -webkit-transform: scale(0.75); /* Webkit */ -o-transform: scale(0.75); /* Opera */ -ms-transform: scale(0.75); /* IE 9 */} 100% {visibility:hidden; opacity: 0; transform: -moz-transform: scale(0.5); /* Firefox */ -webkit-transform: scale(0.5); /* Webkit */ -o-transform: scale(0.5); /* Opera */ -ms-transform: scale(0.5); /* IE 9 */} } @keyframes fadeOutScale { 0% {visibility:visible; opacity: 1; transform: scale(1);} 40% {opacity: 1;transform: scale(0.75);} 60% {opacity: 1;transform: scale(0.75);} 100% {visibility:hidden;opacity: 0; transform: scale(0.5);} } .fadeOutScale { -webkit-animation-name: fadeOutScale; animation-name: fadeOutScale; } .animated-fade-out { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes fadeOut { 0% {visibility:visible; opacity: 1;} 40% {opacity: 1;} 60% {opacity: 1;} 100% {visibility:hidden;opacity: 0;} } @keyframes fadeOut { 0% {visibility:visible; opacity: 1;} 40% {opacity: 1;} 60% {opacity: 1;} 100% {visibility:hidden;opacity: 0;} } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } 

 <div class="overlay animated-fade-out fadeOut"><h1 class="thank-you-message animated-thank-you fadeOutScale">Thank You</h1></div> <div class="btn" style="height:20px;">ONE</div> <div class="btn" style="height:20px;">two</div> <div class="btn" style="height:20px;">three</div> 

Answer 1

 function runAnimation () { $('.overlay').removeClass('animated-fade-out fadeOut'); $('.overlay h1').removeClass('fadeOutScale'); setTimeout(function() { $('.overlay').addClass('animated-fade-out fadeOut'); $('.overlay h1').addClass('fadeOutScale'); }); } $(runAnimation); $('#one').click(runAnimation); 

 .overlay { position: fixed; top: 0; left: 0; height: 100%; width: 100%; display: table; background-color:rgb(39, 174, 96); z-index: 10; } h1.thank-you-message { font-size:12.0rem;display: table-cell; color:#fff; text-align: center; vertical-align: middle;-webkit-perspective: 1000;-webkit-font-smoothing: antialiased;} .animated-thank-you { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes fadeOutScale { 0% {visibility:visible; opacity: 1;transform: scale(1); /* CSS3 */ -moz-transform: scale(1); /* Firefox */ -webkit-transform: scale(1); /* Webkit */ -o-transform: scale(1); /* Opera */ -ms-transform: scale(1); /* IE 9 */} 40% {opacity: 1;transform: transform: scale(0.75); /* CSS3 */ -moz-transform: scale(0.75); /* Firefox */ -webkit-transform: scale(0.75); /* Webkit */ -o-transform: scale(0.75); /* Opera */ -ms-transform: scale(0.75); /* IE 9 */} 60% {opacity: 1;transform: transform: scale(0.75); /* CSS3 */ -moz-transform: scale(0.75); /* Firefox */ -webkit-transform: scale(0.75); /* Webkit */ -o-transform: scale(0.75); /* Opera */ -ms-transform: scale(0.75); /* IE 9 */} 100% {visibility:hidden; opacity: 0; transform: -moz-transform: scale(0.5); /* Firefox */ -webkit-transform: scale(0.5); /* Webkit */ -o-transform: scale(0.5); /* Opera */ -ms-transform: scale(0.5); /* IE 9 */} } @keyframes fadeOutScale { 0% {visibility:visible; opacity: 1; transform: scale(1);} 40% {opacity: 1;transform: scale(0.75);} 60% {opacity: 1;transform: scale(0.75);} 100% {visibility:hidden;opacity: 0; transform: scale(0.5);} } .fadeOutScale { -webkit-animation-name: fadeOutScale; animation-name: fadeOutScale; } .animated-fade-out { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes fadeOut { 0% {visibility:visible; opacity: 1;} 40% {opacity: 1;} 60% {opacity: 1;} 100% {visibility:hidden;opacity: 0;} } @keyframes fadeOut { 0% {visibility:visible; opacity: 1;} 40% {opacity: 1;} 60% {opacity: 1;} 100% {visibility:hidden;opacity: 0;} } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="overlay"><h1 class="thank-you-message animated-thank-you">Thank You</h1></div> <div id="one" style="height:20px;">ONE</div> <div id="two" style="height:20px;">two</div> <div id="three" style="height:20px;">three</div> 

Answer 2

 $(".btn").click(function() { var $elOvl = $('.overlay'), $elThx = $('.thank-you-message'); function addAnimationClasses() { $elOvl.addClass('fadeOut'); $elThx.addClass('fadeOutScale'); } $elOvl.removeClass('fadeOut'); $elThx.removeClass('fadeOutScale'); /* We need to add classes AFTER they have been removed, so we postpone the adding of classes to the next frame with the next line. */ setTimeout(addAnimationClasses, 0); }); 

 .btn { background: #3c9; margin: 9px 0; padding: 3px; } .overlay { position: fixed; top: 0; left: 0; height: 100%; width: 100%; display: table; background-color: rgb(39, 174, 96); z-index: 10; } h1.thank-you-message { font-size: 12.0rem; display: table-cell; color: #fff; text-align: center; vertical-align: middle; -webkit-perspective: 1000; -webkit-font-smoothing: antialiased; } .animated-thank-you { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes fadeOutScale { 0% { visibility: visible; opacity: 1; transform: scale(1); /* CSS3 */ -moz-transform: scale(1); /* Firefox */ -webkit-transform: scale(1); /* Webkit */ -o-transform: scale(1); /* Opera */ -ms-transform: scale(1); /* IE 9 */ } 40% { opacity: 1; transform: transform: scale(0.75); /* CSS3 */ -moz-transform: scale(0.75); /* Firefox */ -webkit-transform: scale(0.75); /* Webkit */ -o-transform: scale(0.75); /* Opera */ -ms-transform: scale(0.75); /* IE 9 */ } 60% { opacity: 1; transform: transform: scale(0.75); /* CSS3 */ -moz-transform: scale(0.75); /* Firefox */ -webkit-transform: scale(0.75); /* Webkit */ -o-transform: scale(0.75); /* Opera */ -ms-transform: scale(0.75); /* IE 9 */ } 100% { visibility: hidden; opacity: 0; transform: -moz-transform: scale(0.5); /* Firefox */ -webkit-transform: scale(0.5); /* Webkit */ -o-transform: scale(0.5); /* Opera */ -ms-transform: scale(0.5); /* IE 9 */ } } @keyframes fadeOutScale { 0% { visibility: visible; opacity: 1; transform: scale(1); } 40% { opacity: 1; transform: scale(0.75); } 60% { opacity: 1; transform: scale(0.75); } 100% { visibility: hidden; opacity: 0; transform: scale(0.5); } } .fadeOutScale { -webkit-animation-name: fadeOutScale; animation-name: fadeOutScale; } .animated-fade-out { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes fadeOut { 0% { visibility: visible; opacity: 1; } 40% { opacity: 1; } 60% { opacity: 1; } 100% { visibility: hidden; opacity: 0; } } @keyframes fadeOut { 0% { visibility: visible; opacity: 1; } 40% { opacity: 1; } 60% { opacity: 1; } 100% { visibility: hidden; opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <div class="overlay animated-fade-out fadeOut"> <h1 class="thank-you-message animated-thank-you fadeOutScale">Thank You</h1> </div> <div class="btn">ONE</div> <div class="btn">two</div> <div class="btn">three</div> 

Answer 3

要在元素上启动动画，需要向其添加一个类。 您的情况是fadeOut和fadeOutScale 。

如果只希望动画在单击时开始，则需要从动画元素中删除这两个动画类，因此动画不会在加载时开始。

<div class="overlay animated-fade-out">
  <h1 class="thank-you-message animated-thank-you">Thank You</h1>
</div>  
<div class="btn" style="height:20px;">ONE</div>
<div class="btn" style="height:20px;">two</div>
<div class="btn" style="height:20px;">three</div>

要启动动画，您需要向动画元素中添加类，然后再将其删除，以便稍后可以再次添加它们，以再次启动动画。

$(".btn").click(function() {  
    $(".overlay").addClass("fadeOut").one("animationend", function() {
        $(this).removeClass("fadeOut").find(".thank-you-message").removeClass("fadeOutScale");
    }).find(".thank-you-message").addClass("fadeOutScale");
});

Answer 4

无需为btn div的每次单击克隆覆盖div。 相反，只需删除应用于overlay div和h1标签的类，然后稍等一会儿便将其添加回去。

该脚本如下所示：

$(".btn").click(function() {
    $("#overlay").removeClass("overlay animated-fade-out fadeOut").hide();
    $("#overlay h1").removeClass("thank-you-message animated-thank-you fadeOutScale");

    setTimeout(function(){
        $("#overlay").css('display','').addClass("overlay animated-fade-out fadeOut");
        $("#overlay h1").addClass("thank-you-message animated-thank-you fadeOutScale");
        },1);
    });

在此处查看代码： https ： //jsfiddle.net/code/

结果在这里： https : //jsfiddle.net/result/