Question

这个动画一切都很好，直到最后一点。我已经制作了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');
   });
});

Answer 1

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

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

Answer 2

添加hide（）;在removeClass之后（“打开”）

$(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").hide();
 $('.price_description').addClass("swiftin");
$('#button3d').fadeIn('slow', function() {
     $('.price_description').css('display', 'none');
  });
});

P.S。$(document).ready();错了，请查看文档

使用jQuery动画按钮的问题：不隐藏

2 个答案: