jquery - 单击时的 Div css 动画

Question

我有一个按钮，它打开一个带有 CSS 动画的“菜单”。就像动画中的淡入淡出/幻灯片:

现在我想实现这个动画反转(淡入淡出/滑出动画)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

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

如文档中所述，此方法针对所选元素在 slideUp() 和 slideDown() 之间切换。

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

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