Блог

Главная - Вопросы по программированию - Проблемы с запуском javascript для обновления HTML и воспроизведения анимации подсчета с использованием ключевых кадров CSS

Проблемы с запуском javascript для обновления HTML и воспроизведения анимации подсчета с использованием ключевых кадров CSS

#javascript #jquery #css #iteration #keyframe

#javascript #jquery #css #итерация #ключевой кадр

Вопрос:

Я пытаюсь создать простое веб-приложение с использованием HTML / CSS и Javascript / jQuery, которое считает до 10 и анимирует и отображает числа одно за другим. У меня анимация работает хорошо, но я не смог найти наилучший способ обновить и перезапустить анимацию в Javascript с помощью jQuery.

Все, что я хочу, чтобы программа выполняла анимацию «grow-number», затем повторяла число в тегах h1 .anim, а затем отображала ту же анимацию для каждого числа в последовательности, начиная с 1 до 10, чтобы браузер показывал анимированную последовательность подсчета.

Я пытался использовать setInterval и обратные вызовы, но я определенно сделал это неправильно, поэтому я не буду включать эти сбои в свой код.

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font: normal 200px sans-serif;
  font-family: 'Quicksand', sans-serif;
  color: orange;
}

.content-area {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: green;
  min-height: 100vh;
  /*opacity:0%;*/
}

.anim {
  transform: scale(0);
  opacity: 0;
  
  /*this animation SHOULD PROBABLY be called with javascript
  or jquery but I have NOT had any luck getting it to work and 
  iterating throug the numbers.  I uncommented here just to show 
  what it looks like in general*/
 
  animation: grow-number 4s 2s 10;
  /*animation-duration:4s;
    animation-name: grow-number;
    animation-delay:2s;
    animation-iteration-count:10;*/
}

@keyframes grow-number {
  0% {
    transform: scale(0);
    opacity: 0%;
  }
  10% {
    opacity: 100%;
  }
  19% {
    transform: scale(2.25);
    color: orange;
  }
  20% {
    transform: scale(2);
    color: blue;
  }
  80% {
    transform: scale(2);
    color: blue;
  }
  90% {
    opacity: 100%;
    color: orange;
  }
  100% {
    transform: scale(0);
    color: orange;
    opacity: 0%;
  }
}  
 <!DOCTYPE html>
<html>

<head>
  <title>Count to 10!</title>
  <!--jquery-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    //this needs to iterate and rerun the grow-number animation
    $(".anim").text(1);
    $(".anim").css({
      'animation': 'grow-number 4s 2s'
    });
  </script>
  <!--Font-->
  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@600amp;display=swap" rel="stylesheet">

  <!--STYLESHEETS-->
  <link rel="stylesheet" href="countingdemo.css">
</head>

<body>
  <div class="content-area">
    <h1 class="anim">0</h1>
  </div>
</body>

</html>

Может ли кто-нибудь помочь мне с кодом javascript / jquery, который работает.

Ответ №1:

Пожалуйста, попробуйте это,

Пожалуйста, подождите немного, пока я отрегулирую задержку анимации между подсчетами.

 $('.anim').each(function () {
  $(this).prop('Counter',0).animate({
      Counter: 10
  }, {
      duration: 40000,

      step: function (now) {
          $(this).text(Math.ceil(now));
      }
  });
});  
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font: normal 200px sans-serif;
  font-family: 'Quicksand', sans-serif;
  color: orange;
}

.content-area {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: green;
  min-height: 100vh;
  /*opacity:0%;*/
}

.anim {
  transform: scale(0);
  opacity: 0%;
  animation: grow-number 4s 2s 10 linear;
}
@keyframes grow-number {
  0% {
    transform: scale(0);
    opacity: 0%;
  }
  10% {
    opacity: 100%;
  }
  19% {
    transform: scale(2.25);
    color: orange;
  }
  20% {
    transform: scale(2);
    color: blue;
  }
  80% {
    transform: scale(2);
    color: blue;
  }
  90% {
    opacity: 100%;
    color: orange;
  }
  100% {
    transform: scale(0);
    color: orange;
    opacity: 0%;
  }
}  
 <!DOCTYPE html>
<html>

<head>
  <title>Count to 10!</title>
  <!--jquery-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!--Font-->
  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@600amp;display=swap" rel="stylesheet">

  <!--STYLESHEETS-->
  <link rel="stylesheet" href="countingdemo.css">
</head>

<body>
  <div class="content-area">
    <h1 class="anim">0</h1>
  </div>
</body>

</html>