Question

我不知道是否可能。我想尝试使用Ajax加载内容，并一点一点地制作动画。我有空身。在服务器端，我有带有h1段和两个图像的文档。我想用不同角度（左，上，右，下）的动画加载ajax。我知道如何制作动画但是只要我加载它们就已经在页面上，我想将它们设置为页面动画。代码如下所示：

<body>
<button id="load"></button>
</body>

我的jquery脚本

 <script>
    $('#load').click(function() {
        callAjax();
        return false;

    });// end of click function 

});

function callAjax() {

    $.ajax({
        type: "POST",
        cache: false,
        url: 'content.html',
         success: function(data){
         if(data !== ""){
          $("html").prepend(data);
          }
        },
        error: function () {
            console.log('error', data);
        },
        complete: function () {
        console.log("done");        }
    }); //ajax call

} //document ready
</script>

服务器端数据

<section class="content">
<h1>About</h1>
<p> Text</p>
<img src="ipad.png" class="rotate">
<img src="ipad1.png" class="circle">
</section>

Answer 1

您可以隐藏“数据”，然后将其设置为动画。

$(data).hide().fadeIn("slow");

Answer 2

要为元素设置动画，您需要超过1个关键帧。目前你只有1：最终状态。你需要另一个来动画。想想一个动作：要让人物在屏幕上行走，你必须首先将它们放在屏幕外。

我将假设我们正在这样做：在屏幕外加载您的内容，然后在屏幕上显示。

在屏幕外设置元素的位置（通过CSS，或显式，但在原始文件中执行此操作）。例如，使用此CSS：

position: absolute;
left: -1000;

将元素放置在窗口左侧1000像素。这是你的起始位置，这是你在加载内容（异步）之后“开始”的地方。

下一部分是过渡阶段，通过代码计算的一系列中间步骤将它们从START移动到END。有很多健壮的JS / HTML / CSS / SVG动画库，但我将使用一个基本的JS函数：setInterval。

var thing = $('#yourThing'); // select your thing
var distInterval = 1000 / 60; // we're going to move 1000px every 60 steps
var code = function() { 
  thing.position().left = thing.position().left + distInterval; // move by the distance
  // destination is an abs position of 100px from the left
  if (thing.position().left == 100) {
    window.clearInterval(); // stops the loop
  }
};
var delay: 16.7; // 1/60th of a second, in ms
var intervalID = window.setInterval(code, delay); // set and start the loop

一旦你对这个概念感到满意，你很快就会发现这是一个糟糕的实现选择。谷歌的一些关键词将是“requestAnimationFrame（）”函数和术语“缓和”。

动画加载Ajax的内容

2 个答案: