javascript - CSS3 动画点击

Question

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

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

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

fiddle :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