如何在javascript中使用带有css动画的html元素？

4uqofj5v 于 2023-03-20 发布在 Java

关注(0)|答案(1)|浏览(121)

有没有一种方法可以使用'@keyframes' Css元素并在花括号中实现html元素来获得动画？我一直在做一个石头剪刀布项目，在那里你点击按钮，它会运行5秒的动画，然后随机降落在一个手势上。我目前的html和javascript代码是这样的：

<h1 id="pageTitle">Rock - Paper - Scissors!</h1>

<div class="container">
<div class="box" id="box">

</div>
  
  <span></span> 
</div> 
<button class="button" id="Shoot" onclick="shoot()">RPS Shoot!</button>

var rpsArr = [
      "<div class='rock'><div class='rockhand rockPointerFinger'></div><div class='rockhand rockMiddleFinger'></div><div class='rockhand rockRingFinger'></div><div class='rockhand rockPinkyFinger'></div><div class='rockhand rockThumb'></div><div class='rockhand rockPalm'></div></div>",
      '<div class="scissors scissorsPointerFinger"></div><div class="scissors scissorsMiddleFinger"></div><div class="scissors scissorsRingFinger"></div><div class="scissors scissorsPinkyFinger"></div><div class="scissors scissorsThumb"></div><div class="scissors scissorsPalm"></div>', 
      '<div class="paper paperPointerFinger"> <div class="paperPointBackground"></div></div><div class="paper paperMiddleFinger"><div class="paperMidBackground"></div></div><div class="paper paperRingFinger"><div class="paperRingBackground"></div></div><div class="paper paperPinkyFinger"><div class="paperPinkyBackground"></div></div> <div class="paper paperThumb"><div class="paperThumbBackground"></div></div><div class="paper paperPalm"><div class="paperPalmBackground"></div></div>'
    ];

/*Function that runs animation then ends on one of the hands in to the box as a final result */

function shoot() {
   document.getElementById("box").innerHTML = 
   "<style>.box{animation-name:rps; animation-duration: 5seconds;} @keyframes: rps {0% {;} 10% {;} 20% {;} 40% {;} 60% {;} 80 {;} 100% {;}}</style>
    rpsArr[Math.floor(Math.random() * rpsArr.length)];"
  };

我肯定我可以只制作每个手势的图像，这会更容易，但我想使用数组中的div元素来完成。
我试过使用一个脚本，通过一个基本循环，一次输入一个数组元素，但是它停止了，没有动画，5分钟后，只产生了结尾，这是一个随机选择的手势，但是没有效果。
我所查找的任何动画帮助都只涉及到通过改变元素的大小、颜色或在屏幕上移动元素来转换元素，而且由于我并没有尝试转换这些元素，因此对于预期的目标来说，这并没有帮助或转换得很好。

css

来源：https://stackoverflow.com/questions/75750067/how-can-i-use-html-elements-with-css-animation-in-javascript

1条答案

按热度按时间

but5z9lq1#

OP，你可以看到下面的片段，我将如何处理这个问题。@Yogi的建议可能也很好，但我不是很熟悉新的动画API，并不真正知道是否交换元素进出将是一个适当的用例或没有。

var visibleIdx = 0;

var options = document.getElementsByClassName("option");

var startTime = 0;

function shoot() {
    startTime = Date.now();
    
  loopUntilTime(startTime + 5000);
  document.getElementById("filler").classList.toggle("tickdown");
};

function loopUntilTime(endTime){
    var newIdx;
  do {
    newIdx = Math.floor(Math.random() * 3);
  }
  while (newIdx === visibleIdx);
  options[visibleIdx].style.display = "none";
  visibleIdx = newIdx;
  options[visibleIdx].style.display="";
  
  if (Date.now() < endTime)
  {
    setTimeout(() => loopUntilTime(endTime), 300);
  }
  else{
    document.getElementById("filler").classList.toggle("tickdown");
  }
}

#progressBar{
  margin-top: 5px;
  width: 100px;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  
}

#filler{
  height: 100%;
  width: 100%;
  background-color: lightgreen;
}

.tickdown{
  animation: countdown 5s linear;
}

@keyframes countdown{
  from{
    transform: translateX(0%);
    background-color: lightgreen;
  }
  50%{
    transform: translateX(-50%);
    background-color: yellow;
  }
  to{
    transform: translateX(-100%);
    background-color: red;
  }
}

<h1 id="pageTitle">Rock - Paper - Scissors!</h1>

 <div class="container">
   <div class="box" id="box">
     <div class="option" style="display: none">
       Rock
     </div>
     <div class="option" style="display: none">
       Scissors
     </div>
     <div class="option" style="display: none">
       Paper
     </div>
   </div>

 </div>
 <button class="button" id="Shoot" onclick="shoot()">RPS Shoot!</button>
 <div id="progressBar">
   <div id="filler">
     
   </div>
 </div>

简而言之，我不会尝试使用CSS animation来交换不同的DOM元素。如果您想使用具有不同background-images的单个元素来实现您的石头、布和剪刀，这可能更易于管理，但由于您有完全不同的div，我认为JS解决方案更合适。此外，作为对鼠标点击的响应以触发动画的新<style>元素中的热交换相当粗略，并且以后将难以维护或调试。
如果你对这个问题还有其他问题，我很乐意帮助你，但是请先编辑你的帖子，提供一个minimal reproducible example（或者在这个例子中，只是一个一般的工作示例），最好格式化为StackSnippet（工具栏中的<>图标）。确保包括你的CSS，这样我们就可以实际运行你的代码，看看你看到了什么。

赞(0）回复(0）举报 2023-03-20

我来回答

如何在javascript中使用带有css动画的html元素？

1条答案

相关问题

热门标签

最新问答