Здравствуйте.
Использую две анимации anima.js по клику на одну кнопку:
var buttonEl = document.querySelector('.burger');
// First Click button
function clickButton() {
anime.remove(buttonEl);
var clickAnimation = anime.timeline ({
targets:'.closeLine1, .closeLine2 ',
delay: function(el, i) { return i * 75; },
duration: 150,
easing: 'linear'
});
clickAnimation.add({
targets:'.not-clickable .burgerLine1, .not-clickable .burgerLine2',
width: '0px',
update: function(anim) {
buttonEl.classList.remove("not-clickable");
buttonEl.classList.add("clickable");
}
});
clickAnimation.add({
width: ['0px', '32px']
});
}
buttonEl.addEventListener('click', clickButton, function() {
anime.clickButton;
});
// Second Click button
function unClickButton() {
anime.remove(buttonEl);
var unClickAnimation = anime.timeline ({
targets:'.clickable .closeLine1, .clickable .closeLine2 ',
delay: function(el, i) { return i * 75; },
duration: 150,
easing: 'linear'
});
unClickAnimation.add({
width: '0px',
update: function(anim) {
buttonEl.classList.remove("clickable");
buttonEl.classList.add("not-clickable");
}
});
unClickAnimation.add({
targets:'.burgerLine2',
width: ['0px', '24px']
});
unClickAnimation.add({
targets:'.burgerLine1',
width: ['0px', '32px']
});
}
buttonEl.addEventListener('click', unClickButton, function() {
anime.unClickButton;
});
Подскажите как сделать так, чтобы функции выполнялись поочередно по клику на кнопку(при первом нажатии одна, при втором другая)?