jQuery 切换显示 none 和 animate.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 和阻止，但也切换 classes:

animate__slideInRight and animate__slideInLeft

所以...

如果它被隐藏并调用函数，它会显示效果 animate__slideInRight (animate.css class)

否则

如果它是可见的并且函数被调用，它会隐藏效果animate__slideInLeft (animate.css class)

我的函数显示效果很好 animate__slideInRight 但是当我再次点击时 if 快速隐藏没有效果。

我该如何解决这个问题？

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>

jQuery 切换显示 none 和 animate.css 类

jQuery Toggle Display none and animate.css classes

javascript

jquery

animate.css