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

Using jQuery to restart an animation that is already hidden and transparent

本文关键字：透明 动画 隐藏 jQuery 重新启动 使用      更新时间：2023-09-26

我有一个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>

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>

$(".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>

要在元素上启动动画，需要为其添加一个类。在您的案例中，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");
});

不需要为每次点击btndiv克隆覆盖div。相反，只需删除应用于覆盖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/

相关文章：