Две анимации с использованием css, javascript, две кнопки onclick () - PullRequest
Новая
       11

Две анимации с использованием css, javascript, две кнопки onclick ()

0 голосов
/ 21 марта 2019

Я хочу создать две анимации в CSS.В моем проекте я использую две кнопки, один объект.Я забочусь, что нажата первая кнопка, запускается первая анимация на объекте.

Я знаю, что мне делать, когда у меня есть одна кнопка и одна анимация, но я не знаю, как решить проблему с двумя разными анимациями на одном и том же объекте.

Редактировать 3. Я нахожу проблему!

1 Ответ

0 голосов
/ 21 марта 2019

Соответствует ли это вашим требованиям? 

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

Без полей CSS, при условии, что вы используете jQuery, вы можете использовать .animate(). Однако .animate() не примет transform в качестве своего свойства. Мы сделаем это в обратном вызове. 

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