How to animate ajax / json response?

Question

This is my piece of HTML code.

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

I make an Ajax request and get a json response for every click of the user, and I add q_div and a_div using the jquery function

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

I have a css keyframe animation on both q_div and a_div to go from the right side to the screen. But the animation only works on the first page load, and not in the add function for json's response. I am new to css and animation. help me in flexible animation

animation in css3 code:

.q_div {
    animation: q_ani 2s;
}

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

}

Answer 1

possible solution using css animation

$(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>

Run code

Answer 2

.q_div .

Answer 3

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/

Answer 4

I hope this can help you, I just use a function classListand some SASS style rule

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