javascript - 如何为 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 关键帧动画 从屏幕的右到左。但动画仅适用于页面的第一次加载，而不适用于 json 响应的“附加”功能。我是 css 和动画的新手。帮我做响应式动画

css3 代码中的动画:

.q_div {
    animation: q_ani 2s;
}

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

}

Answer 1

使用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>