如何为ajax/json响应添加动画效果？

Question

这是我的HTML代码。

<div class='qna_div'>
    <div class="q_div"></div>
    <div class="a_div"></div>
</div>

我通过Ajax请求获取每个用户点击的JSON响应，并使用jQuery函数附加q_div和a_div。

$('.q_div').append(data.question);
$('.a_div').append(data.answer);

我在q_div和a_div上都使用了css动画来使它们从屏幕右侧向左移动。但是该动画仅在页面首次加载时起作用，而不在“append”函数的json响应中起作用。我对css和动画还不熟悉。请帮我实现响应式动画。

css3代码中的动画：

.q_div {
    animation: q_ani 2s;
}

@keyframes q_ani {
    from{margin-left: 50px;}
    to{margin-left: default;}

}

- Yogi

---

请发布您当前的动画代码。 - anmarti

我们不知道您想要什么样的效果。 - charlietfl

Answer 1

每次需要动画出现时，您应该删除并添加.q_div类。

- Dmitry Yudin

Answer 2

一种可能的解决方案是使用CSS动画。

$(function() {
  var cssAnimationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
  $('.click').click(function() {
    $('.q_div, .a_div').addClass("animate").one(cssAnimationEnd , function() {
      $('.q_div, .a_div').removeClass("animate");
    });

  });
})

.q_div.animate {
  animation: q_ani 2s;
}
.a_div.animate {
  animation: q_ani 2s;
}
@keyframes q_ani {
  from {
    margin-left: 150%;
  }
  to {
    margin-left: default;
  }
}
/*for test purpose*/

.q_div,
.a_div {
  position: relative;
  height: 20px;
  width: 500px;
  background: #ddd;
  margin-top: 10px;
}
.qna_div {
  padding: 20px;
  width: 500px;
  background: #333;
}
body {
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">go</button>
<div class='qna_div'>
  <div class="q_div"></div>
  <div class="a_div"></div>
</div>

- Vanojx1

Answer 3

希望能对您有所帮助，我只是简单地使用了 classList 函数和一些 SASS 样式规则。

http://jsbin.com/vosuvam/2/edit?js,output

- Felix Fong

Answer 4

您可以使用 jquery 来为您的 div 元素添加动画效果。将以下代码放置在 success ajax 回调函数中：

 // First put your divs to the right
 $('.q_div, .a_div').css('right','0');
 // Do the animation
 $('.q_div, .a_div').animate({
    left: 0,
 }, 1000);

https://jsfiddle.net/a8cq9yj1/1/

- anmarti