两个动画使用 css、javascript、两个按钮 onclick()

Question

I want to create two animations in css. In my project, I use two button, one object. I care, that the first button is being clicked, the first animation on the object is being run.

I know, what I should do, when I have one button and one animation, but I do not know how to solve problem with two different animations on the same object.

Edit 3. I find problem!

Answer 1

Does this meet your requirements?

 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>

EDIT

Without css fields, assuming that you're using jQuery, you can use .animate() . However, .animate() won't take transform as its property. We'll do this in the callback.

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