CSS3翻译出屏幕

Question

对于许多项目,我现在在页面上有我想要翻译出屏幕区域的元素(让它们飞出文档).在适当的代码中,这应该可以通过向相关元素添加一个类来实现,之后css将处理其余的.问题在于,例如,如果

.block.hide{
    -webkit-transform:translateY(-10000px);
}

使用该元素首先将不必要地飞出屏幕并且具有不必要的高速度.纯粹从美学的角度来看,还有很多事情要做(从理论上讲,例如一个高度为10000px的屏幕可以在未来的某一天推出).

(更新)无法使用百分比的问题是100%是相对于元素本身而不是父元素/屏幕大小.并且在完整大小的父级中包含元素是可能的,但是会产生点击事件的混乱.在几个答案之后,请允许我指出我正在谈论翻译,而不是关于position:absolutecss3过渡(这一切都很好,但是一旦你得到足够的,他们就会停止变得有趣).

你能想到什么美学上令人愉悦的解决方案允许元素在固定的时间内从屏幕转换出来？

示例代码可以在这个jsfiddle中找到,展示了基本概念. http://jsfiddle.net/ATcpw/

(有关更多信息,请参阅下面的答案)

Answer 1

如果用包装容器包装.block div:

<div class="container">
   <div class="block"></div>
</div>
<button>Click</button>

您可以展开然后在click事件后翻译容器本身

document.querySelector("button").addEventListener("click", function () {
   document.querySelector(".container").classList.add("hide");
});

有这种风格

.block {
    position:absolute;
    bottom:10px;
    right:10px;
    left:10px;
    height:100px;
    background:gray;
}

.container {
    -webkit-transition: -webkit-transform ease-in-out 1s;
    -webkit-transform-origin: top;
    -webkit-transition-delay: 0.1s; /* Needed to calculate the vertical area to shift with translateY */
}

.container.hide {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    /* background:#f00; /* Uncomment to see the affected area */ 
    -webkit-transform: translateY(-110%);
}

通过这种方式,可以应用正确的translationY百分比(略高于100%,只是为了让它不受影响)并保持按钮可点击.

你可以在这里看到一个有效的例子:http://jsfiddle.net/MG7bK/

PS:我注意到只有transitionY属性需要转换延迟,否则动画会失败,可能是因为它试图在具有高度的实际值之前启动.如果你使用translateX使用水平消失,它可以省略.

Answer 2

我知道这不是你要问的但是......

你会考虑在Greensock的动画平台上使用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);
}

Answer 3

我所做的是使用vh(视图高度)单位.它总是相对于屏幕大小而不是元素本身:

/* moves the element one screen height down */
translateY(calc(100vh))

因此,如果您知道屏幕中元素的位置(例如top:320px),您可以将其完全移出屏幕:

/* moves the element down exactly off the bottom of the screen */
translateY(calc(100vh - 320px))