javascript - 使用 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>