运行JavaScript以使用CSS关键帧更新HTML并重播计数动画时出现的问题

如何解决运行JavaScript以使用CSS关键帧更新HTML并重播计数动画时出现的问题

我正在尝试使用HTML / CSS和Javascript / JQuery构建一个简单的Web应用程序，该应用程序的数量为10，并设置动画并依次显示数字。我的动画效果很好，但是我无法找出使用JQuery在Javascript中更新和重新运行动画的最佳方法。

我只希望程序运行动画“ 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@600&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代码帮助我。

解决方法

请尝试这个

请稍等我调整计数之间的动画延迟。

TreeViewItem

<TreeView.ItemContainerStyle>
   <Style TargetType="{x:Type TreeViewItem}"
          BasedOn="{StaticResource {x:Type TreeViewItem}}">
      <Setter Property="Tag" Value="{Binding DataContext,RelativeSource={RelativeSource AncestorType={x:Type TreeView}}}"/>
      <Setter Property="ContextMenu">
         <Setter.Value>
            <ContextMenu>
               <MenuItem Header="Sil"
                         Command="{Binding PlacementTarget.Tag.DeleteFolderCommand,RelativeSource={RelativeSource AncestorType=ContextMenu}}"
                         CommandParameter="{Binding}"></MenuItem>
            </ContextMenu>
         </Setter.Value>
      </Setter>
   </Style>
</TreeView.ItemContainerStyle>

$('.anim').each(function () {
  $(this).prop('Counter',0).animate({
      Counter: 10
  },{
      duration: 40000,step: function (now) {
          $(this).text(Math.ceil(now));
      }
  });
});

运行JavaScript以使用CSS关键帧更新HTML并重播计数动画时出现的问题

如何解决运行JavaScript以使用CSS关键帧更新HTML并重播计数动画时出现的问题

解决方法

相关推荐