CSS3 动画点击

Question

我有两个数字，一个蓝色和一个红色。我有四个按钮，它们使用 JavaScript 来切换蓝色和红色方块的 CSS 规则。

问题是当我点击“播放红色”按钮开始为红色方块设置动画时，它消失了。我已经检查了代码，但我不知道我在这里错过了什么。

当我使用左/右按钮旋转蓝色方块时，会出现第二个问题。当我第一次击中它时，它会旋转。但是每当我再次按下左/右按钮时，它都会重置到起始位置，然后再次旋转 60 度。我的目标是禁用位置重置。因此，如果您按两次左右按钮，蓝色方块现在应该旋转了 120 度。

小提琴：https://jsfiddle.net/pbukq2vu/

右键 ：

document.getElementById('button1').addEventListener('click', function() {
    document.getElementById('blue').classList.remove('rotateright', 'rotateleft');
    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');
});

Answer 1

用css替换这两个类

#red {
    background-color:#ffaaaa;
    width:50px;
    height:50px;
    position:relative;
    margin-left: 150px;
    margin-top:20px;
    border:thin;
    border-color:#000;
    border-width:1px;
    -webkit-transition: left 3s; 
    transition: left 3s;
    left:10px;
}
.animate {
    left: 100px !important;
}

JSfiddle