CSS3翻译出屏幕 [英] CSS3 translate out of screen

问题描述

对于一些项目，我已经在页面上的元素，我想翻译出屏幕区域（让他们飞出文档）。在正确的代码中，这应该是可能的，只是通过添加一个类到相关的元素，然后css将处理其余的。问题在于如果例如

For a number of projects now I have had elements on the page which I want to translate out of the screen area (have them fly out of the document). In proper code this should be possible just by adding a class to the relevant element after which the css would handle the rest. The problem lies in the fact that if for example

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

使用元素将首先飞出屏幕不必要的远处，具有不必要的高速度。纯粹从美学角度来看，还有很多事情需要留意（理论上来说，例如一个高度为10000px的屏幕可以在将来的某一天推出）。

is used the element will first of all fly out of the screen unnecessarily far and with an unnecessarily high speed. And purely from an aesthetic point of view there's a lot left to be desired (Theoretically speaking for example a screen with a height of 10000px could be introduced one day in the future).

（更新）不能使用百分比的问题是，100％相对于元素本身，而不是父元素/屏幕大小。并在全尺寸的父级包含元素是可能的，但会创建一个点击事件的混乱。在几个答案后，让我指出，我在谈论翻译，而不是关于 position：absolute css3转换（这都没关系，但一旦你得到足够的

(Update) The problem why percentages can't be used is that 100% is relative to the element itself, rather than to the parent element/screen size. And containing the element in a full-sized parent would be possible, but would create a mess with click events. And after a few answers, allow me to point out that I am talking about translations, not about position:absolute css3 transitions (which are all fine, but once you get enough of them they stop being fun).

在一个固定的时间内，一个元素可以从屏幕上翻译出来的美观的解决方案，你能想到吗？

What aesthetically pleasing solutions to allow an element to translate out of a screen in a fixed amount of time can you guys think of?

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

Example code can be found in this jsfiddle demonstrating the basic concept. http://jsfiddle.net/ATcpw/

（请参阅下面的自己的答案，了解更多信息）

(see my own answer below for a bit more information)

推荐答案

知道这不是你要的，但是...

I know this is not exactly what you were asking but...

你会考虑使用CSS动画 Greensock的动画平台？它非常快（它声称它比jQuery快20倍），你可以在这里看到速度测试： http：// www .greensock.com / js / speed.html

Would you consider using CSS animations with Greensock's Animation Platform? It is terribly fast (it claims it's 20 times faster than jQuery), you can see the speed test here: http://www.greensock.com/js/speed.html

这会让你的代码更好我相信，而不是试图破解CSS动画，你可以专注于更重要的东西。

It would make your code nicer I believe, and instead of trying to hack CSS animations you could focus on more important stuff.

我在这里创建了一个JSFiddle： http：// jsfiddle .net / ATcpw / 4 /

I have created a JSFiddle here: http://jsfiddle.net/ATcpw/4/

CSS和可能的JS看起来更简单：

Both CSS and possible JS look simpler:

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);
}

这篇关于CSS3翻译出屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！