Question

我想在CSS中创建两个动画。在我的项目中，我使用两个按钮，一个对象。我在乎，第一个按钮被单击，对象上的第一个动画正在运行。

我知道，当我有一个按钮和一个动画时该怎么办，但是我不知道如何解决同一对象上的两个不同动画的问题。

编辑3.我发现问题！

Answer 1

这符合您的要求吗？

let btn_a = document.getElementById('a')
let btn_b = document.getElementById('b')
let btn_c = document.getElementById('c')
let div = document.getElementById('obj')
btn_a.addEventListener('click', function() {
  div.className = 'anim-a'
})
btn_b.addEventListener('click', function() {
  div.className = 'anim-b'
})
btn_c.addEventListener('click', function() {
  $('#obj').animate({}, function(){
    $('#obj').css({transform: 'rotate(30deg) translate(200px)'})
  })
})

div {
  background-color: pink;
  width: 100px;
  transition: all linear 0.5s;
}

.anim-a {
  background-color: yellowgreen;
  width: 150px;
}

.anim-b {
  background-color: grey;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='obj'>animated</div>
<button id='a'>anim-a</button>
<button id='b'>anim-b</button>
<button id='c'>anim-c</button>

编辑

如果没有css字段，则假设您使用的是jQuery，则可以使用.animate()。但是，.animate()不会将transform作为其属性。我们将在回调中完成此操作。

btn_c.addEventListener('click',function() {
  $('#obj').animate({}, function(){
    $('#obj').css({transform: 'rotate(30deg)'})
  })
})

使用CSS，JavaScript和两个按钮onclick（）的两个动画

1 个答案: