В этом примере все достаточно очевидно и отрабатывает правильно
$('div').click(function() {
$('div').toggleClass('wide');
});
div {
width: 80px;
height: 30px;
background-color: green;
transition: all 0.4s ease-in-out;
}
.wide {
width: 140px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
Но мне необходимо усложнить анимацию, как это сделать правильно? При добавлении keyframes анимация отрабатывает только при добавлении класса, а при удалении все происходит без анимации.
$('div').click(function() {
$('div').toggleClass('wide');
});
div {
width: 80px;
height: 30px;
background-color: green;
transition: all 0.4s ease-in-out;
}
@keyframes blue {
50% {
background-color: blue;
}
100% {
width: 200px;
background-color: blue;
}
}
.wide {
animation-name: blue;
animation-duration: 0.4s;
animation-fill-mode: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
Как мне необходимо организовать код, чтобы анимация по клику отрабатывала "в обе стороны"?