Question

我正在尝试使用ajax转换到一个新页面，一切正常，但CSS转换没有正确动画。更具体地说，我有一个<a>元素，当点击时会向我的服务器发出ajax POST请求。服务器使用jQuery的body延迟对象方法发回一个附加到我文档的.done()的HTML文件。但是，当我将CSS类添加到新的HTML中以使其转换到浏览器视口时，样式更改会立即应用而不是动画。如果我在1ms超时后执行.addClass()，则动画正确执行。我认为这个问题与我的课程添加时没有完全确定的DOM有关，但是我还没有使用.setTimeout()来修复它。虽然这是一个简单的解决方案，但它看起来并不健壮，但它仍然意味着我对这个过程并不了解。绝对赞赏任何提示。

以下是相关的代码：

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>Intercepting Link Clicks</title>
    <link rel="stylesheet" type="text/css" href="app.css">
    <script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id = 'firstScene'>
    <a href="/server/" id = 'serverRequestLink'>Get Stuff From The Server</a>
</div>

app.js

$(document).ready(app);

function app () {    

$('#serverRequestLink').on('click', getServerStuff);
};

function getServerStuff (e) {
    e.preventDefault();
    $.ajax({
    method: 'POST',
    url: 'ajaxTest',
}).done(function(secondSceneHTML){
    $('body').append(secondSceneHTML);
    $('#secondScene').addClass('visible');
});
};

secondScene.html

<div id = 'secondScene'>
    <p>I'm the second scene.</p>
</div>

app.css

#secondScene {
background-color: blue;
position: fixed;
top: 0;
bottom: 0;
left:200px;
right: 0;
transition: all 1s;
}

#secondScene.visible {
top: 0; right: 0; bottom: 0; left: 0;
}

从jQuery触发CSS转换ajax.done（）

0 个答案: