Анимация с Ajax и CSS3 - PullRequest
Новая
       31

Анимация с Ajax и CSS3

0 голосов
/ 17 марта 2012

Я создаю небольшой скрипт, который позволяет мне вставлять и выводить разделы контента через Ajax и CSS. Я успешно сделал это скользящим при загрузке страницы сверху, но у меня есть одна проблема, выдвигающаяся!

Я написал клип для 'aniOut', который также работает, но я не могу сделать одну загрузку перед переходом другой. Я перепробовал несколько вещей, но у меня либо заблокирована страница, либо прекращена загрузка, либо я просто не запускаюсь правильно. Я включил рабочий код во весь CSS 'aniIn', потому что он содержит возможность функционировать в -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 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>

ранее опубликовано без ответа по адресу: Предыдущее сообщение

1 Ответ

0 голосов
/ 28 марта 2012

Я пробовал несколько способов после того, как @Zeta ссылался на сайт MDN.Я решил остаться с элементом анимации, потому что я могу установить такой эффект, как отскок или скорость перемещения позиции (прогрессивное замедление).

Первая попытка, я хотел попробовать чистый CSS, но не смог получить его, и я не получил ни одного отзыва о том, почему вопрос, почему .

Тогдапопытался сделать это с JavaScript и имел некоторый успех.У меня сейчас есть одна проблема со сценарием, но это официальное исправление того, что я пытался.(Примечание: текущая проблема - первая ссылка, по которой щелкнуть не будет переходить, возможно, у меня есть решение)

См. Ссылки для решений кода.

...