分区 css animation 点击

Question

我有一个按钮，它打开一个带有 css animation 的“菜单”。 这就像 animation 中的淡入淡出/滑动：

现在我想实现这个 animation 反向（淡出/滑出动画） onclick 但我不知道我怎么能实现它

https://jsfiddle.net/tafgd5mu/1/

 var isOpen = false; $("#Widget").click(function() { // Close if (isOpen == true) { isOpen = false; $("#Widget").html('Open') // Open } else { isOpen = true; $('<div class="widget ">DIV</div>').insertAfter("#Widget"); $("#Widget").html('Close') } })

 @keyframes widget-slide-in { from { opacity: 0; bottom: 40; } to { opacity: 1; bottom: 80; } }.widget { width: 450px; height: 80%; overflow: hidden; border-radius: 3px; display: flex; position: fixed; bottom: 80px; margin: 20px; top: initial; background-color: #eef0f4; flex-direction: column; animation: widget-slide-in 0.25s ease-in-out; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1); transition: opacity 0.25s ease-in-out, bottom 0.25s ease-in-out; left: unset;important: right; 0.important: };button { position: fixed; bottom: 0; margin: 20px; top: initial; color: white; font-size: 16px; font-weight: 300; overflow: hidden; padding: 12px 23px; border: none; outline: none; cursor: pointer; pointer-events: all; background-color: #7ebd0b, font-family, 'Nunito'; 'Helvetica': sans-serif; border-radius: 25px, box-shadow, 0 0 5px 2px rgba(0, 0. 0; 0:1); will-change: auto; width: auto; white-space: nowrap; left: unset;important. right: 0;important: };button>svg { margin-bottom: -3px; margin-right: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="Widget" class="button">Open</button>

Answer 1

如果您查看您的 CSS，您会发现您的 animation 有关键帧：

@keyframes widget-slide-in {
  from {
    opacity: 0;
    bottom: 40; }
  to {
    opacity: 1;
    bottom: 80; } 
}

如果您进一步检查您的代码，您还可以看到此 animation 用于您的Widget class。 如果您创建一组新的关键帧，并切换from和to参数中的值，如果我正确理解您的问题，您将拥有所需的 animation。

例如，您可以调用此widget-slide-out ，并将此 animation 添加到您的元素 onClick，如果isOpen == true根据。 您的 jQuery 代码。

但是，正如上面的评论者所建议的那样，我只添加一次 div 元素，或者至少添加一次，再次删除它。

您还可以考虑使用 jQuery 具有的.slideToggle()功能，因为我认为它可以在这种情况下使用。

https://api.jquery.com/slidetoggle/

Answer 2

最简单的方法是使用 Jquery slideToggle()

此方法在文档中提到的所选元素的 slideUp() 和 slideDown() 之间切换。

https://api.jquery.com/slidetoggle/

https://www.w3schools.com/jquery/eff_slidetoggle.asp