jQuery Toggle不显示和显示animate.css类

Question

我有一个最初由显示隐藏的div：在CSS中没有。

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

我有一个功能：

function togglefunc() {

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

}

我想做的是切换显示：无和阻止但也切换类：

animate__slideInRight and animate__slideInLeft

所以...

如果隐藏并且调用了该函数，则会显示出带有animate__slideInRight的效果（animate.css类）

否则

如果可见并且调用了该函数，它将以animate__slideInLeft（animate.css类）的效果隐藏。

我的函数使用animate__slideInRight效果很好，但是当我再次单击时，如果没有效果，则快速隐藏。

我该如何解决？

Answer 1

可悲的是，您无法为从display: none到display: block的元素设置动画。但是，您可以使用visibility: hidden和visibility: visible。

Answer 2

这不起作用，因为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>