jquery - 使用/jQuery为按钮设置动画时出现问题:不会隐藏

直到最后一刻，一切都在该动画中运行良好。我做了一个CodePen，并在下面插入了jQuery代码。

当我单击第二个按钮时，文本区域显示为动画。当我单击文本区域以将其关闭时，它将在完全消失之前执行最后的“显示”。我试图在关闭动画（CSS文件）中添加不透明度属性，但这似乎还不够。有任何想法吗？

$(document).ready();

$('#button2d').click(function() {
   $('.price_description').removeClass("swiftin");
   $('.price_description').addClass("open");
   $('.price_description').show();
   $('#button3d').fadeOut(080);
});

$('.price_description').click(function() {
   $('.price_description').removeClass("open");
   $('.price_description').addClass("swiftin");
   $('#button3d').fadeIn('slow', function() {
      $('.price_description').css('display', 'none');
   });
});

最佳答案

添加到.swiftin类animation-fill-mode: forwards;以便在最后一帧停止动画：

.swiftin {
  animation: swiftin 0.5s;
  animation-fill-mode: forwards;
}