用Javascript修改CSS3动画

Question

首先，这里是我需要帮助的网站的基本代码：检查底部是否编辑

我想要一些关于动画本身的帮助，因为如果我在div 1并按下任何键，它就像一个魅力。但是，例如，如果我在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;

Answer 1

您可以跟踪上一页，以便保留其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.

Fiddle：http://jsfiddle.net/G4PXj/9/

这样可以确保页面布局具有以下z索引：100表示当前页面(即动画页面，您希望它显示在所有其他页面之上)，99表示上一页面(您要离开的页面：显示在所有其它页面之上，但仍在动画页面之后)，0表示其余页面，这些页面与动画无关。

gotoPage()函数将要离开的页面(即当前页面)设置为上一页，将要访问的页面(如document.getElementById(id))设置为当前页面。然后布局将应用于这些新页面设置。

关于停顿，下面是这个相关问题中的一个很好的例子：如何使用JavaScript暂停和恢复CSS3动画？