Продолжить CSS анимацию после скрытия элемента - PullRequest
Новая
       9

Продолжить CSS анимацию после скрытия элемента

0 голосов
/ 27 января 2019

Я делаю эту игру, и есть кнопка с анимацией перезарядки.Игрок нажимает эту кнопку, и когда анимация заканчивается, он получает что-то (вроде игры с кликером).

Есть навигационная панель.Я хочу, чтобы игрок мог нажать на эту кнопку, перейти на другую вкладку (и, следовательно, скрыть эту кнопку) и вернуться к просмотру анимации.

Вот упрощенная версия моего кода: 

 <!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>

По сути, я хочу иметь возможность щелкнуть по кнопке перезарядки, нажать «Скрыть», подождать несколько секунд, нажать «Показать» и увидеть анимацию законченную (или почти готовую).В настоящее время он просто перезапускается.

Ответы [ 3 ]

0 голосов
/ 27 января 2019

Вот вы: 

$(".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 голосов
/ 27 января 2019

Это можно сделать с помощью хитрости CSS.Если вы добавляете в HTML оболочку, а затем используете псевдоэлемент с белым фоном position: absolute и z-index: -2, вы можете использовать addClass и removeClass в своем jQuery, чтобы скрыть кнопку "Сделать что-то"за этим псевдоэлементом.Я сделал рабочий кодовый блок , а также фрагмент ниже.

Посмотрите его в действии: 

$(".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>
0 голосов
/ 27 января 2019 

$(".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, и вы можете увидеть непрерывную анимацию

...