动画与Ajax和CSS3 [英] Animation with Ajax, and CSS3

问题描述

我创建一个小脚本，让我滑我的内容部分进出，虽然Ajax和CSS。我已经成功地使其从顶部滑动，在页面加载，但我有一个问题，滑出！

I am creating a little script that allows me to slide my content sections in and out though Ajax and CSS. I have have successfully made it slide in on page loads from the top but I have one problem, sliding out!

我写了一个夹子aniOut的作品也是，但我不能似乎之前，其他转型做一个负载。我已经尝试了一些东西，但我要么在页面锁定，停止加载，还是根本就没有正确启动。我包括工作code与整个aniInCSS，因为它包含对-moz -webkit发挥作用的能力，但只有基本的动画$ C $下'aniOut，以节省我的线程的空间。

I wrote a clip for 'aniOut' that works also but I cant seem to make one load before the other in transition. I have tried a few things but I either have the page lock up, stop loading, or simply not initiate correctly. I included the the working code with the whole 'aniIn' CSS because it contains ability to function on -moz -webkit but only the basic animation code for 'aniOut' to save on the space of my thread.

有人可以把我对一个资源，帮助我学习什么，我需要做什么？的

我的网站是用活在头脑公司。

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脚本：

Java Script:

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>

previously贴有没有答案在： previous帖子

推荐答案

我试了几种方法后@Zeta引用MDN网站。我决定留下来与动画元素，因为我可以设置的效果，如弹跳或位置的移动速度（渐进减速）。

I tried several ways after @Zeta referenced MDN website. I decided to stay with animation element because I can set the effect such as a bounce or position movement speeds( progressive slow down ).

我想尝试纯CSS的第一次尝试，但我无法得到它，我还没有收到关于为什么的问题为什么。

The first attempt I wanted to try pure CSS but I couldn't get it and I haven't received any feedback on why question to why.

然后我试图做到这一点使用JavaScript ，并取得了一些成功。我有一个问题，剧本，但现在这是我试图一个官方修复。 （注：现在的问题是，点击会不会过渡的第一个环节，我可能有一个解决方案，虽然）

Then I tried to do it with JavaScript and had some success. I do have one issue with the script right now but this is a official fix to what I was trying. (Note: Current issue is the first Link clicked will not transition, I may have a solution though)

见code解决方案的链接。

See the links for code solutions.

这篇关于动画与Ajax和CSS3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！