0

まず第一に、これが私が助けを必要としているサイトの基本的なコードです： 編集のために底をチェックしてください

アニメーション自体について少し助けてください。div1にいて、任意のキーを押すと、それは魅力のように機能するからです。しかし、私がdiv 3にいて、div 2に移動したい場合、たとえば、最初にdiv 1をロードしてから、div 2に移動します。なぜそれが行われるのかはわかりますが、回避する方法を考えることはできません。それ。何か案は？

また、アニメーションがすでに再生されている場合は、入力から関数を一時停止したいと思います（したがって、数値をスパムしたり、アニメーションを台無しにしたりすることはできません）。どうすれば簡単にそれを行うことができますか？

ありがとう！

編集

怠惰ではないことを私に求めている数人の非常にいい人たちのために、OPは次のことを提供します：http： //jsfiddle.net/G4PXj/7

また; http://codepen.io/anon/pen/zJsBH

また、HTMLボックスを押してから2、3、または4を押し、アニメーションがFOVに読み込まれるまで数秒待ちます。

HTML：

<div id="fourth" class="hidden">Fourth box
    <button onClick="fubar('first');">First page</button>
</div>
<div id="third" class="hidden">Third div</div>
<div id="second" class="hidden">Som text in the second</div>
<div id="first">Some content
    <button onClick="fubar('second');">Second page</button>
</div>

スタイル：

@charset "utf-8";
body {
    background-color: #fff;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#first {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    color: #fff;
    box-shadow: 0 0 40px #333;
    background-color: #000;
}
#second {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: green;
}
#third {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: red;
}
#fourth {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: blue;
}
.hidden {
    display: none;
}
.test {
    -moz-animation-name: wat;
    -webkit-animation-name: wat;
    -moz-animation-duration: 4s;
    -webkit-animation-duration: 4s;
    -moz-animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -webkit-animation-direction: normal;
    z-index: 100;
    display: block;
}
@-moz-keyframes wat {
    0% {margin-left:-3000px;}
    60% {margin-left: 200px;}
    100% {margin-left: 0;}
}
@-webkit-keyframes wat {
    0% {margin-left:-3000px;}
    60% {margin-left: 200px;}
    100% {margin-left: 0;}
}

Javascript：

function clearAll() {
    document.getElementById('first').className = '';
    document.getElementById('second').className = '';
    document.getElementById('third').className = '';
    document.getElementById('fourth').className = '';
}

function troll(objectID) {
    document.getElementById(objectID).className += ' test';
}

function fubar(objectID) {
    clearAll();
    troll(objectID);
}

function KeyCheck(e) {
    var KeyID = (window.event) ? event.keyCode : e.keyCode;
    switch (KeyID) {

    case 49:
        clearAll();
        troll('first');
        break;

    case 50:
        clearAll();
        troll('second');
        break;

    case 51:
        clearAll();
        troll('third');
        break;

    case 52:
        clearAll();
        troll('fourth');
        break;
    }
}
document.onkeyup = KeyCheck;
4

1 に答える 1

0

前のページを追跡して、そのページがz-index残るようにすることができます。

// CSS
.page{
  z-index: 0;
  // your other page settings
}
.previous{
  z-index: 99;
}
.test{
  z-index: 100;
  // your animation settings
}

コード：

document.getElementById('button1').onclick = function(){ gotoPage('first'); }
document.getElementById('button2').onclick = function(){ gotoPage('second'); }
var previous, current;

function gotoPage(id){
    // simplified className manipulation
    if(previous) previous.className = 'page';
    previous = current;
    if(previous) previous.className = 'page previous';
    current = document.getElementById(id);
    current.className = 'page test';
}

// key detection, etc.

jQueryバージョン：

// JS
$('#button1').click(function(){ gotoPage('first'); });
$('#button2').click(function(){ gotoPage('second'); });
var $previous, $current;

function gotoPage(id){
  if($previous) $previous.removeClass('previous');
  $previous = $current;
  if($previous) $previous.removeClass('test').addClass('previous');
  $current = $('#' + id).addClass('test').removeClass('hidden');
}

// key detection, etc.

フィドル： http： //jsfiddle.net/G4PXj/9/

これにより、次のzインデックスを持つページレイアウトが保証されます：現在の場合は100（つまり、アニメーション化されたページ、他のすべての上に表示する）、前の場合は99（離れるページ：他のすべての上に表示するが、それでもアニメーションページの後ろ）と残りの0は、アニメーションに関係のないページです。

gotoPage（）関数は、残しているページ（つまり、現在）を前に設定し、到達したいページ（つまり、document.getElementById（id））を現在に設定します。レイアウトは、これらの新しいページ設定に適用されます。

一時停止に関しては、この関連する質問の良い例があります： JavaScriptを使用してCSS3アニメーションを一時停止および再開する方法は？

于 2012-10-01T23:23:14.167 に答える