Вы ищете свойство animation-fill-mode
, которое позволяет сохранить конечное состояние применяемой анимации как , задокументированное на w3 c.
$(document).ready(() => {
$('.show').on('click', () => {
$('.child').addClass('show');
})
$('.hide').on('click', () => {
$('.child').addClass('hide');
})
})
.child {
width: 0;
height: 0;
border: 2px solid red;
overflow: hidden;
}
.child.show {
animation-name: expandit;
animation-duration: 1s;
width: 100px;
height: 100px;
}
.child.hide {
animation-name: hideit;
animation-duration: 1s;
animation-direction: reverse;
animation-fill-mode: forwards;
}
@keyframes expandit {
0% {
width: 0;
}
100% {
width: 100px;
}
}
@keyframes hideit {
0% {
width: 0;
}
100% {
width: 100px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<a class="show" href="#">Show</a>
<a class="hide" href="#">Hide</a>
<div class="child">
</div>
</div>
Однако, если вы хотите вернуться в «реальное начальное состояние», где height: 0;
, потребуется дополнительный ключевой кадр на 99,99%. чтобы скрыть эту вторую анимацию. Не стесняйтесь оставлять комментарии, если у вас возникнут дополнительные вопросы.