Question

我正在制作这款游戏，并且有一个带有冷却动画的按钮。播放器单击此按钮，动画结束后，他们会得到一些东西（有点像单击游戏）。

有一个导航栏。我希望播放器能够单击此按钮，转到另一个选项卡（因此隐藏此按钮），然后返回以查看动画完成。

这是我的代码的简化版本：

 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
    .cooldown-button
    {
        position: relative;
    border: 1px solid black;
    display: inline-block;
    padding: 0.2vh 0;
    text-align: center;
    width: 20vw;
    cursor: pointer;
    }
        .cooldown-inner
        {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #BBB;
            width: 0;
            height: 100%;
            z-index: -1;
        }
        @keyframes cooldown
        {
            0% {width: 100%}
            100% {width: 0%}
        }
    </style>
</head>
<body>

<div class="cooldown-button">Do something<div class="cooldown-inner"></div></div>

<div class="hide">Hide</div>
<div class="show">Show</div>

<script>
$(".cooldown-button").click(function(){
    $(".cooldown-inner").css("animation","none");
    $(".cooldown-inner").hide().show();
    $(".cooldown-inner").css("animation","cooldown 2000ms linear");
});
$(".hide").click(function(){
    $(".cooldown-button").hide();
});
$(".show").click(function(){
    $(".cooldown-button").show();
});

</script>

</body>
</html>

基本上，我希望能够单击冷却按钮，单击“隐藏”，等待几秒钟，单击“显示”，然后看动画完成（或即将完成）。目前，它只是重新启动。

Answer 1

$(".cooldown-button").click(function() {
  $(".cooldown-inner")
    .css("animation", "cooldown 4s linear")
    .one("animationend", function() {
      $(this).css("animation", "none")
    });
});
$(".hide").click(function() {
  $(".cooldown-button").addClass('hide');
});
$(".show").click(function() {
  $(".cooldown-button").removeClass('hide');
});

.cooldown-button {
  position: relative;
  border: 1px solid black;
  display: inline-block;
  padding: 0.2vh 0;
  text-align: center;
  width: 20vw;
  cursor: pointer;
}

.cooldown-button.hide {opacity:0}

.cooldown-inner {
  transition:.5s;
  opacity:1;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #BBB;
  width: 0;
  height: 100%;
  z-index: -1;
}

@keyframes cooldown {
  0% {
    width: 100%
  }
  100% {
    width: 0%
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cooldown-button">Do something
  <div class="cooldown-inner"></div>
</div>

<div class="hide">Hide</div>
<div class="show">Show</div>

用于隐藏和显示元素，而不是使用jQuery hide()将元素的opacity从1更改为0，以再次显示它将其从0更改为1，您可以看到连续的动画

Answer 2

您在这里：

$(".cooldown-button").click(function() {
  $(".cooldown-inner")
    .css("animation", "cooldown 4s linear")
    .one("animationend", function() {
      $(this).css("animation", "none")
    });
});
$(".hide").click(function() {
  $(".cooldown-button").addClass('hidden');
});
$(".show").click(function() {
  $(".cooldown-button").removeClass('hidden');
});

.cooldown-button {
  position: relative;
  border: 1px solid black;
  display: inline-block;
  padding: 0.2vh 0;
  text-align: center;
  width: 20vw;
  cursor: pointer;
}

.hidden {position:absolute; transform:scaleX(0)}

.cooldown-inner {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #BBB;
  width: 0;
  height: 100%;
  z-index: -1;
}

@keyframes cooldown {
  0% {
    width: 100%
  }
  100% {
    width: 0%
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cooldown-button">Do something
  <div class="cooldown-inner"></div>
</div>

<div class="hide">Hide</div>
<div class="show">Show</div>

Answer 3

这可以通过CSS技巧来完成。如果为HTML提供包装器，然后使用白色背景的伪元素position: absolute和z-index: -2，则可以在jQuery中使用addClass和removeClass隐藏该伪元素后面的“执行操作”按钮。我制作了一个有效的codepen，以及下面的代码段。

查看实际效果：

$(".cooldown-button").click(function(){
    $(".cooldown-inner").css("animation","none");
    $(".cooldown-inner").hide().show();
    $(".cooldown-inner").css("animation","cooldown 2000ms linear");
});
$(".hide").click(function(){
    $(".cooldown-button").addClass("hidden");
});
$(".show").click(function(){
    $(".cooldown-button").removeClass("hidden");
});

.wrapper:after {
  background: white;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -2;
}

.cooldown-button {
  position: relative;
  border: 1px solid black;
  display: inline-block;
  padding: 0.2vh 0;
  text-align: center;
  width: 20vw;
  cursor: pointer;
}

.cooldown-inner {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #BBB;
  width: 0;
  height: 100%;
  z-index: -1;
}

.hidden {
  position: absolute;
  z-index: -3;
}

@keyframes cooldown {
  0% {
    width: 100%
  }
  100% {
    width: 0%
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="cooldown-button">
    Do something
    <div class="cooldown-inner"></div>
  </div>

  <div class="hide">Hide</div>
  <div class="show">Show</div>
</div>

隐藏元素后继续CSS动画

3 个答案: