gpt4 book ai didi

javascript - 使用 Ajax 加载的动画内容

转载 作者:太空宇宙 更新时间:2023-11-03 17:32:56 25 4
gpt4 key购买 nike

我不知道这是否可能。我想尝试使用 Ajax 加载内容,并立即对其进行动画处理,一段一段。我的 body 是空的。在服务器端,我有带有 h1 段落和两个图像的文档。我想用带有不同 Angular (左、上、右、下)动画的 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>

最佳答案

要为元素设置动画,您需要超过 1 个关键帧。目前你只有 1:结束状态。你需要另一个来制作动画。想一想:要让 Angular 色在屏幕上行走,您必须先将他们定位在屏幕外。

我假设我们正在这样做:将您的内容加载到屏幕外,然后在屏幕上移动。

设置元素的位置(通过 CSS,或明确地,但在原始文件中这样做)屏幕外。例如,使用这个 CSS:

position: absolute;
left: -1000;

这会将元素放置在窗口左侧 1000 像素处。这是您的起始位置,即您在(异步)加载内容后“开始”的位置。

下一部分是过渡阶段,通过您的代码计算的一系列中间步骤将它们从开始移动到结束。有许多强大的 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()”函数和术语“缓动”。

关于javascript - 使用 Ajax 加载的动画内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30222643/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com