jQuery Переключить Display none и анимировать. css классы

Question

У меня есть div, который изначально скрыт отображением: none в css.

<div id="myDiv" class="animate__animated">Div content Here</div>

У меня есть функция:

function togglefunc() {

    $('#myDiv').toggle().toggleClass('animate__slideInRight animate__slideInLeft');

}

Что я хочу сделать состоит в переключении отображения: none и block, но также в переключении классов:

animate__slideInRight and animate__slideInLeft

Итак ...

Если он скрыт и вызывается функция, он отображается с эффектом animate__slideInRight (animate . css class)

в противном случае

Если он виден и функция вызывается, он скроется с эффектом animate__slideInLeft (animate. css class)

My функция показывает нормально с эффектом animate__slideInRight, но когда я снова нажимаю, если быстро скрывается без эффекта.

Как я могу это исправить?

Answer 1

Это не работает, потому что переключатель jquery выполняется сразу, а не после завершения анимации скрытия, вызванной изменением атрибута.

Вместо этого я бы использовал только jQuery для этого эффекта слайда:

function togglefunc() {
   $("#myDiv").animate({width: "toggle"}, 350);
}

#myDiv {
   overflow: hidden;
   white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="togglefunc()">Toggle</button><br><br>
<div id="myDiv" class="animate__animated">Div content Here</div>

Answer 2

К сожалению, вы не можете анимировать элемент от display: none до display: block. Однако вы можете использовать visibility: hidden и visibility: visible.