javascript - 使用 JS 触发器的 CSS3 中的动画

Question

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

所以我需要两件事的帮助。

1. 修复多次点击旋转功能，它一直旋转。
2. 防止方 block 重置其位置。

我用代码做了一个 fiddle :https://jsfiddle.net/kv7may8t/2/

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

功能总结:点击按钮 1 触发函数，将类“rotateright”添加到蓝色方 block ，使其旋转 120 度。

Answer 1

首先删除类的答案将解决您的第一个问题:

var bluediv = document.getElementById('blue')

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

检查 Fiddle. (可以多次点击旋转功能，旋转功能一直旋转。-已解决)

第二件事的答案是(仅适用于右侧):

使用:animation-iteration-count: forwards;

检查 Fiddle here. (防止方 block 重置它的位置 - 已解决)