javascript – 如何动画ajax / json响应？

2019年7月21日 174次阅读

这是我的
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响应的’append’函数.我是css和动画的新手.帮助我做出响应式动画

css3代码中的动画：

.q_div {
    animation: q_ani 2s;
}

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

}

最佳答案 使用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>
点赞