Javascript 使用JS触发器在CSS3中制作动画

我有一个问题，当你使用函数来旋转蓝色方块时，你只能使用它一次。之后，您必须重新加载页面才能再次使用旋转功能。 此外，当您通过单击一次旋转120度时，正方形会自行重置并返回到起始位置

所以我需要两件事的帮助

修复，以便您可以多次单击旋转函数并使其保持旋转

防止正方形重置其位置

我对代码做了一个修改：

功能概述： 点击按钮1触发函数，将类“rotateright”添加到蓝色正方形，使其旋转120度。

尝试以下代码：

    document.getElementById('button1').addEventListener('click', function() {
   var degrees +=120;
   var time = 4;
   document.getElementById('blue').style.WebkitTransitionDuration= time + "s";
   document.getElementById('blue').style.transform = "rotate(" +degrees + "deg)";
});

---

调整更改程度和持续时间。

您的代码是正确的，只需进行一些修改，您正在使用transform，当您添加类时，它会旋转该div。您只需在添加类之前删除该类。 这是。 使用此代码

document.getElementById('button1').addEventListener('click', function() {
    document.getElementById('blue').classList.remove('rotateright');
    setTimeout(function(){
        document.getElementById('blue').classList.add('rotateright');    
    },100)

});

document.getElementById('button2').addEventListener('click', function() {
    document.getElementById('blue').classList.remove('rotateleft');
    setTimeout(function(){
        document.getElementById('blue').classList.add('rotateleft');        
    },100)
});


document.getElementById('button3').addEventListener('click', function() {
    document.getElementById('red').classList.add('animate');
});

document.getElementById('button4').addEventListener('click', function() {
    document.getElementById('red').classList.remove('animate');
});

---

不要忘记在删除类之后使用setTimeout，它需要一些时间。所以使用setTimeout，然后添加类。

第一件事的答案remove class将解决您的第一个问题：

var bluediv = document.getElementById('blue')

bluediv.addEventListener("animationend", function() {
bluediv.classList.remove('rotateright');
      bluediv.classList.remove('rotateleft');
});

选中（您可以多次单击旋转功能，它将保持旋转。-已解决）

第二件事的答案是（仅适用于右边）：

使用：

动画迭代次数：向前

检查（防止正方形重置其位置-已解决）
您可以使用jQuery动画。我更喜欢使用JS和CSS解决此任务。它很有效。但是平滑动画已经消失了。可以调整吗？不要在javascript中使用CSS样式，这会对性能产生很大影响。有两件事，一件是在动画完成后，左右旋转都会自动重置，立方体回到标准位置。第二，如果您单击了RotateLight，则在不上载页面的情况下无法单击RotateLight。我应该向setTimeout添加哪些数字？您也可以单击rotateright按钮删除retotaleft。100毫秒足以等待添加类，您可以使用我提供的小提琴进行检查。是的，我调整了，效果很好。现在我可以双向发送垃圾邮件了。但是，它们仍然在每次动画之后重置它们的位置。两个小提琴的行为都与原始代码一样。多维数据集仍在重置其位置，您不能多次单击。@Winterwind抱歉，我仅为firefox浏览器支持而制作，我使用webkit支持对其进行更新。请再次检查小提琴链接。谢谢！现在一切正常。最后一个问题。每当我尝试从dreamweaver->localhost->GoogleChrome运行代码时，什么都不会发生。知道为什么吗？确保你在里面应用了所有的webkit动画。
var bluediv = document.getElementById('blue')

bluediv.addEventListener("animationend", function() {
bluediv.classList.remove('rotateright');
      bluediv.classList.remove('rotateleft');
});