javascript - Ajax 成功函数动画

Question

我有一个使用 Ajax 的报价表请求，我终于让一切都按照我想要的方式工作(特别感谢之前帮助过我的一位成员)。我只想做一个美观的补充，但我不确定该怎么做。我想要在按下提交按钮时必须使用 slideInUp css 动画的成功消息，而不是它只是出现而没有动画。

这就是我目前所拥有的..

$("#myform").submit(function(e) {
            e.preventDefault(); // avoid to execute the actual submit of the form.
            var $this = $(this)
            var url = $this.attr('action') // get the action attribute of current form
            $.ajax({
                   type: "POST",
                   url: "submit.php",
                   data: $this.serialize(), // serializes the form's elements.
                   success: function(data)
                   {
                       $this.find('.fs-submit').css('background', '#1fae5b');
                       $this.find('.fs-submit').css('color', '#ffffff');
                       $this.find('.fs-submit').css('border', '#1fae5b');
                       $this.find('.fs-submit').prop('disabled', true);
                       $this.find('.fs-submit').val('Submitted').text('Submitted ✔');
                       $this.find('.success').css('display', 'inline');
                   }
                 });

        });

HTML:

<button class="fs-submit" type="submit" value="Submit" id="submit">Submit</button>
<p class="success">Your request for a quote has been sent to us. We will get back to you shortly!</p>

还有 CSS:

p.success{
     margin: 0 auto;
     display: none;
     color: #1fae5b;
     font-family: 'Open Sans', sans-serif;
     font-weight: 600;
     font-size: 14px;
}

Answer 1

当搜索 css slideinup 时，Google 搜索结果中的第一件事是 this CodePen使用必要的 CSS:

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
} 

使用这个 CSS，而不是这样做:

$this.find('.success').css('display', 'inline');

这样做

$this.find('.success').addClass('slideInUp');