私は 1 ページのサイトを構築しており、現在のコンテンツをアニメーション化してから新しいコンテンツをアニメーション化することで、セクション間を移動しようとしています。setTimeout() を使用してこれを機能させました。現在のコンテンツを 500 ミリ秒かけてアニメートし、setTimeout() を使用して 500 ミリ秒後に新しいコンテンツのアニメートを遅らせます。
問題は、 setTimeout() が信頼できないことがわかり、以前のコンテンツが削除された場合にのみ、新しいコンテンツでアニメーション化できるコールバックまたは何かが必要になることです。
これは animate() のコールバック関数を使用して実行できることはわかっていますが、すべてのコードがネストされているため、作業を引き継ぐ人にとっては読みにくいと思います。理想的には、コールバックをアニメーション コードの奥深くにネストするのではなく、最上位に配置したいと考えています。これは理解が難しいためです。
参考までに、混乱を避けるために、cssトランジションを使用するために、デフォルトの「animate()」関数を「transition()」に置き換えるcss3トランジションプラグインを使用しています。
これは私がこれまでに持っているものです:
関連する HTML
<div id="content">
<article id="reception">
<h1 class="title">
<img src="/images/reception/title.png" alt="Edge" />
</h1>
<img src="/images/reception/1.jpg" alt="" class="tile1" />
<img src="/images/reception/2.jpg" alt="" class="tile2" />
<img src="/images/reception/hero.jpg" alt="" class="hero" />
<img src="/images/reception/content1.jpg" alt="" class="content1" />
<img src="/images/reception/content2.jpg" alt="" class="content2" />
</article>
<article id="floorspace">
<h1 class="title">
<img src="/images/floorspace/title.png" alt="Space" />
</h1>
<img src="/images/floorspace/1.jpg" alt="" class="tile1" />
<img src="/images/floorspace/2.jpg" alt="" class="tile2" />
<img src="/images/floorspace/hero.jpg" alt="" class="hero" />
<img src="/images/floorspace/content1.jpg" alt="" class="content1" />
<img src="/images/floorspace/content2.jpg" alt="" class="content2" />
</article>
</div>
関連するスクリプト:
$(window).bind('hashchange', function (e) {
if ($(':animated').length) {
return false;
}
var section = $.param.fragment();
var current = $('#content').children(':visible').attr('id');
// If this is the first load then load in reception content
if (section === '') {
if (current === 'reception') {
animateContentIn("reception");
}
else {
// Animate out existing content
animateContentOut(current);
setTimeout(function () {
animateContentIn("reception");
}, 500);
}
}
else {
// Otherwise find the current page content and animate out
animateContentOut(current);
setTimeout(function () {
animateContentIn(section);
}, 500);
}
$(window).trigger('hashchange');
});
function animateContentIn(activePage) {
// Now animate in the new content
switch (activePage) {
case "floorspace":
animateFloorspaceElementsIn();
break;
case "reception":
animateReceptionElementsIn();
break;
}
}
function animateContentOut(currentPage) {
// Now animate in the new content
switch (currentPage) {
case "floorspace":
animateFloorspaceElementsOut();
break;
case "reception":
animateReceptionElementsOut();
break;
}
}
function animateReceptionElementsIn() {
$('#reception').show();
$('#reception .title').transition({
bottom: 520
}, 200);
$('#reception .tile1').transition({
bottom: 504
}, 300);
$('#reception .tile2').transition({
bottom: 504
}, 350);
$('#reception .hero').transition({
bottom: 40
}, 500);
$('#reception .content1').transition({
bottom: 8
}, 200);
$('#reception .content2').transition({
bottom: 8
}, 250);
}
function animateReceptionElementsOut() {
$('#reception .title').transition({
bottom: -56
}, 200);
$('#reception .tile1').transition({
bottom: -136
}, 300);
$('#reception .tile2').transition({
bottom: -152
}, 350);
$('#reception .hero').transition({
bottom: -464
}, 500, function () {
$('#reception').hide();
});
$('#reception .content1').transition({
bottom: -112
}, 200);
$('#reception .content2').transition({
bottom: -104
}, 250);
}
function animateFloorspaceElementsIn() {
$('#floorspace').show();
$('#floorspace .title').transition({
bottom: 520
}, 200);
$('#floorspace .tile1').transition({
bottom: 504
}, 300);
$('#floorspace .tile2').transition({
bottom: 504
}, 350);
$('#floorspace .hero').transition({
bottom: 40
}, 500);
$('#floorspace .content1').transition({
bottom: 8
}, 200);
$('#floorspace .content2').transition({
bottom: 8
}, 250);
}
function animateFloorspaceElementsOut() {
$('#floorspace .title').transition({
bottom: -56
}, 200);
$('#floorspace .tile1').transition({
bottom: -136
}, 300);
$('#floorspace .tile2').transition({
bottom: -152
}, 350);
$('#floorspace .hero').transition({
bottom: -464
}, 500, function () {
$('#floorspace').hide();
});
$('#floorspace .content1').transition({
bottom: -132
}, 200);
$('#floorspace .content2').transition({
bottom: -132
}, 250);
}