Je fais ce jeu, et il y a un bouton avec une animation de recharge. Le joueur clique sur ce bouton, et lorsque l'animation se termine, ils obtiennent quelque chose (un peu comme un jeu de clicker).

Il y a une barre de navigation. Je veux que le joueur puisse cliquer sur ce bouton, aller dans un autre onglet (et donc masquer ce bouton), et revenir pour voir l'animation terminée.

Voici une version simplifiée de mon code:

    $(".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();
    });
        .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%}
            }
<script src="https://cdnjs.cloudflare.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>

Essentiellement, je veux pouvoir cliquer sur le bouton de recharge, cliquer sur masquer, attendre quelques secondes, cliquer sur afficher et voir l'animation terminée (ou presque terminée). En attendant, il redémarre simplement.

0
John Doe 27 janv. 2019 à 02:50

3 réponses

Meilleure réponse

Cela peut être fait avec une astuce CSS. Si vous donnez un HTML au wrapper et utilisez ensuite un pseudo-élément avec un fond blanc, position: absolute et un z-index: -2, vous pouvez utiliser addClass et removeClass dans votre jQuery pour masquer le bouton "Faire quelque chose" derrière ce pseudo-élément. J'ai créé un codepen fonctionnel, ainsi qu'un extrait ci-dessous.

Voyez-le en action:

$(".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>
-1
E_net4 changes display name 31 janv. 2019 à 13:18

Vous voilà:

$(".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>
0
Kosh Very 27 janv. 2019 à 00:20
$(".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>

Pour masquer et afficher l'élément au lieu d'utiliser jQuery hide() changer opacity d'un élément de 1 à 0, pour le montrer à nouveau le changer de 0 à 1 et vous pouvez voir une animation continue

0
Armin Eslami 27 janv. 2019 à 00:33