0
我創建了一個小腳本，允許我通過Ajax和CSS將內容部分滑入和滑出。我已經成功地將它從頂部加載到頁面上，但我遇到了一個問題，滑出！Ajax和CSS3動畫
我爲'aniOut'寫了一個剪輯，也可以工作，但我似乎無法在轉換之前先完成一個加載。我已經嘗試了一些東西，但是我要麼鎖定頁面，停止加載，要麼就是無法正確啓動。我將整個'aniIn'CSS的工作代碼包含進去，因爲它包含了在-moz-webkit上運行的功能，但是隻有'aniOut'的基本動畫代碼才能保存在我的線程空間中。
有人可以將我推向一個資源，以幫助我瞭解我需要做什麼嗎？
我的網站與工作幻燈片在The Mind Company住。
CSS：
header {
z-index:100;
position:relative;
display: block;
background-color: #272727;
height:100px;}
#contentBody {
min-height:48em;}
footer {
position:relative;
display: block;
background-color: #272727;
height:168px; }
#aboutPage {
display:none;}
#productPage {
display:none;}
#contactPage {
display:none;}
.aniIn {
z-index:0;
-webkit-animation-name: ANIMATEin;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-moz-animation-name: ANIMATEin;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
/* Currently Not Working in browsers: Is planed for implimentation in later versions. */
animation-name: ANIMATEin;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
-ms-animation-name: ANIMATEin;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
}
@-webkit-keyframes ANIMATEin {
from {
margin-top:-3000px;
}
to {
margin-top:0px;
}
}
@-moz-keyframes ANIMATEin {
from {
margin-top:-3000px;
}
to {
margin-top:0px;
}
}
@keyframes ANIMATEin {
from {
margin-top:-3000px;
}
to {
margin-top:0px;
}
}
.aniOut {
z-index:0;
animation-name: ANIMATEout;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
}
@keyframes ANIMATEout {
from {
margin-top:0px;
}
to {
margin-top:3000px;
}
}
Java腳本：
function $_(IDS) { return document.getElementById(IDS); }
function ani(){
document.getElementById(classID).className ='aniOut';
}
function checkPage(classID, url){
var tmp = '';
var sel = document.getElementsByTagName('section');
for (var i=0; i<sel.length; i++){
if (sel[i].id == classID) { tmp = 'block' } else { tmp = 'none' }
$_(classID).className ='aniIn';
sel[i].style.display = tmp;}
$_(classID).style.display = 'block';
loadContent(classID, url); }
function loadContent (classID, url){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(classID).innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET","content/"+url,true);
xmlhttp.send();}
和HTML5：
<!-- Header Areas: (Constent visual)-->
<header>
<li><a href="#" onclick="checkPage('aboutPage', 'about.html');return false">About</a></li>
<li><a href="#" onclick="checkPage('productPage', 'projects.html');return false">Projects</a></li>
<li><a href="#" onclick="checkPage('contactPage', 'contact.html');return false">Contact</a></li>
</header>
<!-- Content Areas: (Variable visual)-->
<div id="contentBody">
<section id="aboutPage"></section>
<section id="productPage"></section>
<section id="contactPage"></section>
</div>
<!-- Footer Area: (Constant visual)-->
<footer></footer>
以前發佈的與沒有答案：Previous Post
重複http://stackoverflow.com/questions/9747783/transistion-with-ajax-and-css3。布蘭登，請看看http://meta.stackexchange.com/questions/7046/how-do-i-get-attention-for-my-old-unanswered-questions。 – Zeta 2012-03-17 18:29:44
k，對不起。現在將鏈接。 – 2012-03-17 18:59:14
查看https://developer.mozilla.org/en/CSS/CSS_transitions。考慮你想要達到的目標，以及你是否真的需要一個動畫或者只是一個過渡。問自己「我的腳本爲了創造這樣的效果需要做些什麼？」？在內容加載之前添加類*是一個好主意嗎？ – Zeta 2012-03-18 00:03:59