Html CSS3 翻译出屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15317020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 translate out of screen
提问by David Mulder
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
对于许多项目，我现在在页面上有一些元素，我想将它们翻译出屏幕区域（让它们飞出文档）。在适当的代码中，这应该是可能的，只需向相关元素添加一个类，然后 css 将处理其余部分。问题在于，如果例如
.block.hide{
-webkit-transform:translateY(-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).
使用该元素首先会飞出屏幕不必要的远和不必要的高速度。纯粹从美学的角度来看，还有很多不足之处（理论上来说，例如未来某一天可能会推出高度为 10000 像素的屏幕）。
(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:absolutecss3 transitions (which are all fine, but once you get enough of them they stop being fun).
（更新）不能使用百分比的问题是 100% 与元素本身有关，而不是与父元素/屏幕大小有关。并且可以将元素包含在全尺寸的父元素中，但会造成点击事件的混乱。在回答了几个问题之后，请允许我指出我在谈论翻译，而不是关于position:absolutecss3 转换（这些都很好，但是一旦你掌握了它们，它们就不再有趣了）。
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?
你们能想到哪些美学上令人愉悦的解决方案来让元素在固定的时间内从屏幕中移出？
Example code can be found in this jsfiddle demonstrating the basic concept. http://jsfiddle.net/ATcpw/
示例代码可以在演示基本概念的 jsfiddle 中找到。 http://jsfiddle.net/ATcpw/
(see my own answer below for a bit more information)
（有关更多信息，请参阅下面我自己的答案）
采纳答案by strah
I know this is not exactly what you were asking but...
我知道这不完全是您要问的，但是...
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
你会考虑在Greensock 的动画平台上使用 CSS 动画吗？它非常快（它声称它比 jQuery 快 20 倍），你可以在这里看到速度测试：http: //www.greensock.com/js/speed.html
It would make your code nicer I believe, and instead of trying to hack CSS animations you could focus on more important stuff.
我相信它会让你的代码更好，而不是试图破解 CSS 动画，你可以专注于更重要的东西。
I have created a JSFiddle here: http://jsfiddle.net/ATcpw/4/
我在这里创建了一个 JSFiddle：http: //jsfiddle.net/ATcpw/4/
Both CSS and possible JS look simpler:
CSS 和可能的 JS 看起来都更简单：
document.querySelector("button").addEventListener("click",function(){
var toAnimate = document.querySelector(".block");
TweenMax.to(toAnimate, 2, {y: -window.innerHeight});
});
CSS:
CSS：
.block{
position:absolute;
bottom:10px;
right:10px;
left:10px;
height:100px;
background-image: url(http://lorempixel.com/800/100);
}
回答by Aequanox
If you wrap the .block div with a container:
如果用容器包装 .block div：
<div class="container">
<div class="block"></div>
</div>
<button>Click</button>
you could expand and then, translate the container itself afterthe click event
您可以展开，然后在单击事件之后翻译容器本身
document.querySelector("button").addEventListener("click", function () {
document.querySelector(".container").classList.add("hide");
});
with this style
用这种风格
.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%);
}
In this way, it is possible to apply a correct translationY percentage ( a little more than 100%, just to have it out of the way ) and mantaining the button clickable.
通过这种方式，可以应用正确的 translationY 百分比（略高于 100%，只是为了让它不碍事）并保持按钮可点击。
You could see a working example here : http://jsfiddle.net/MG7bK/
你可以在这里看到一个工作示例：http: //jsfiddle.net/MG7bK/
P.S: I noticed that the transition delay is needed only for the transitionY property, otherwise the animation would fail, probably because it tries to start before having an actual value for the height. It could be omitted if you use the horizontal disappearing, with translateX.
PS：我注意到只有 transitionY 属性需要过渡延迟，否则动画会失败，可能是因为它试图在获得高度的实际值之前开始。如果您使用水平消失和 translateX，则可以省略它。
回答by phreakhead
What I did is use the vh(view height) unit. It's always relative to the screen size, not the element itself:
我所做的是使用vh（视图高度）单位。它总是相对于屏幕尺寸，而不是元素本身：
/* moves the element one screen height down */
translateY(calc(100vh))
So if you know the position of the element in the screen (say top:320px), you can move it exactly off the screen:
因此，如果您知道元素在屏幕中的位置（例如top:320px），您可以将其完全移出屏幕：
/* moves the element down exactly off the bottom of the screen */
translateY(calc(100vh - 320px))
回答by Barney
I recently built an app which used precisely this technique for sliding 'panels' (or pages) and tabs of the application in and out of view. A basic implementation of the tabs mechanism can be seen here.
我最近构建了一个应用程序，它正是使用这种技术将应用程序的“面板”（或页面）和选项卡滑入和滑出视图。可以在此处查看选项卡机制的基本实现。
Basically (pesudo-code to illustrate the concept, minus prefixes etc):
基本上（用于说明概念的伪代码，减去前缀等）：
.page {
transform: translateY(100%);
}
.page.active {
transform: translateY(0%);
}
The problem I had was that Android Webkit in particular wouldn't calculate percentage values correctly. In the end I had to use script to grab the viewport width and specify the value in pixels, then write the rules using a library for dynamic stylesheet parsing.
我遇到的问题是 Android Webkit 特别是无法正确计算百分比值。最后，我不得不使用脚本来获取视口宽度并以像素为单位指定值，然后使用动态样式表解析库编写规则。
But eventually, and in spite of only these minor platform-specific problems, this worked perfectly for me.
但最终，尽管只有这些特定于平台的小问题，这对我来说非常有效。
回答by strah
Use calcmethod (http://jsfiddle.net/ATcpw/2/):
使用calc方法（http://jsfiddle.net/ATcpw/2/）：
.block{
position:absolute;
top: -webkit-calc(100% - 110px);
right:10px;
left:10px;
height:100px;
background:gray;
-webkit-transition: all 2s;
/*this adds GPU acceleration*/
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
.block.hide{
top: -100px;
}
Since you are using -webkitprefix I used it as well.
calcis supported by majority of browsers: http://caniuse.com/#search=calc
由于您使用的是-webkit前缀，因此我也使用了它。
calc大多数浏览器都支持：http: //caniuse.com/#search=calc
回答by David Mulder
One very simple, but not aesthetically pleasing solution is to define the class dynamically:
一种非常简单但不美观的解决方案是动态定义类：
var stylesheet = document.styleSheets[0];
var ruleBlockHide;
and
和
//onresize
if(ruleBlockHide) stylesheet.deleteRule(ruleBlockHide);
ruleBlockHide = stylesheet.insertRule('.block.hide{ -webkit-transform:translateY(-'+window.innerHeight+'px); }',stylesheet.cssRules.length);
see: http://jsfiddle.net/PDU7T/
The reason a reference to the rule needs to be kept is that after each screen resize the rule has to be deleted and re-added.
需要保留对规则的引用的原因是，在每次调整屏幕大小后，必须删除并重新添加规则。
Although this solution gets the job done, there has to be some DOM/CSS combination which would allow this to be done without javascript (something along the lines of a 100%x100% element containing such a block, but I haven't been able to figure out any transform based way).
虽然这个解决方案完成了工作，但必须有一些 DOM/CSS 组合，这将允许在没有 javascript 的情况下完成（类似于包含此类块的 100%x100% 元素，但我无法找出任何基于变换的方式）。
回答by Dnaso
get the document width. then use a java script trigger to trigger the css3 translation.
获取文档宽度。然后使用java脚本触发器来触发css3翻译。
function translate(){
var width = document.body.Width;
document.getElementById('whateverdiv').style='translateX(' + width + 'px)';
}
回答by Ardavan Kalhori
This is simple add the following to your div
这很简单，将以下内容添加到您的 div
.myDiv {
-webkit-transition-property: left;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-delay: initial
}
then change the "left" property of it either by adding an additional class or by jQuery
然后通过添加额外的类或通过 jQuery 更改它的“左”属性
This will animate it along the x-axis
这将沿 x 轴设置动画
Note:you can change the -webkit-transition-property to any property you want and this will animate it
注意：您可以将 -webkit-transition-property 更改为您想要的任何属性，这将为其设置动画
