jQuery推送菜单元素反向动画

Question

你能告诉我如何进行反向动画，因为现在动画只是在点击时显示，当我关闭推送菜单时，它会逐渐淡出。

JS：

$(document).ready(function () {
  $(".push-button").click(function () {
    $('.link-item-1').toggleClass('active-1');
    $('.link-item-2').toggleClass('active-2');
    $('.link-item-3').toggleClass('active-3');
    $('.link-item-4').toggleClass('active-4');
    $('.link-item-5').toggleClass('active-5');
  });
});

CSS（link-item）：

#push-menu-inside .link-item {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.link-item-1,
.link-item-2,
.link-item-3,
.link-item-4,
.link-item-5 {
  margin-left: -150px;
}

CSS（主动开放）：

.link-item-2.active-2 {
  margin-left: 20px;
  opacity: 1;
  transition: all 0.2s ease-out;
  transition-delay: 0.6s;
}

您可以在此处查看网站及其推送菜单：vixxxademo.epizy.com