Div CSS анимация при нажатии

Question

У меня есть кнопка, которая открывает «меню» с анимацией CSS. Это похоже на анимацию постепенного исчезновения / слайда:

Теперь я хотел бы реализовать эту анимацию с обратной анимацией (анимация постепенного исчезновения / скольжения), но я не знаю, как я могу это реализовать

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

Answer 2

Если вы посмотрите на свой CSS, вы увидите, что у вас есть ключевые кадры для вашей анимации:

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

Если вы продолжите проверять свой код, вы также увидите, что эта анимация используется на вашем Widget класс. Если вы создадите новый набор ключевых кадров и переключите значения в параметрах from и to, у вас будет нужная анимация, если я правильно понимаю ваш вопрос.

Затем вы можете вызватьнапример, widget-slide-out и добавьте эту анимацию к своему элементу onClick, если isOpen == true согласно. Ваш код jQuery.

Однако, как предложил вышеупомянутый комментатор, я бы добавил элемент div только один раз или, по крайней мере, удалил его снова.

Вы также можете использовать .slideToggle()функциональность, которую имеет jQuery, поскольку, на мой взгляд, ее можно использовать в этом случае.

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