对于一些项目,我已经在页面上的元素,我想要翻译出屏幕区域(让它们从文档中飞出来).在适当的代码中,这应该只是通过向相关元素添加一个类,之后css将处理其余元素.问题在于,如果是例如
.block.hide{
-webkit-transform:translateY(-10000px);
}
使用的元素将首先从屏幕中飞出不必要的距离,并以不必要的高速度.纯粹从审美的角度来看,还有很多需要(理论上讲,例如,将来可能会介绍一个高达10000px的屏幕).
(更新)百分比不能使用的问题是100％是相对于元素本身而不是父元素/屏幕大小.并且将元素包含在一个全尺寸的父项中是有可能的,但是会产生一个点击事件的混乱.经过几个答案,请允许我指出,我在谈论翻译,而不是关于职位：绝对的css3转换(这些都很好,但一旦你得到足够的,他们停止乐趣).
你会想到什么美学上令人愉快的解决方案,允许元素在一个固定的时间内翻出屏幕？
示例代码可以在这个jsfiddle中找到,演示基本概念.
http://jsfiddle.net/ATcpw/
(有关详情,请参阅我自己的答案)
解决方法
我知道这不是你正在问的,但…
你会考虑使用Greensock’s Animation Platform的CSS动画吗？这是非常快的(它声称它比jQuery快20倍),您可以在这里看到速度测试：http://www.greensock.com/js/speed.html
这将使您的代码更好,我相信,而不是试图破解CSS动画,您可以专注于更重要的东西.
我在这里创建了一个JSFiddle：http://jsfiddle.net/ATcpw/4/
CSS和可能的JS看起来更简单：
document.querySelector("button").addEventListener("click",function(){
var toAnimate = document.querySelector(".block");
TweenMax.to(toAnimate,2,{y: -window.innerHeight});
});
CSS：
.block{
position:absolute;
bottom:10px;
right:10px;
left:10px;
height:100px;
background-image: url(http://lorempixel.com/800/100);
}
