Javascript CSS3在屏幕外翻译

对于许多项目，现在我在页面上有一些元素，我想把它们翻译出屏幕区域（让它们飞出文档）。在适当的代码中，只要向相关元素添加一个类，css就可以处理其余的元素。问题在于，例如

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

如果使用，元素首先将以不必要的速度飞出屏幕。纯粹从美学的角度来看，还有很多需要改进的地方（理论上讲，比如说，未来某一天可能会推出一款10000像素高的屏幕）

（更新）无法使用百分比的问题是100%与元素本身有关，而不是与父元素/屏幕大小有关。将元素包含在一个完整大小的父元素中是可能的，但会造成单击事件的混乱。在回答了一些问题之后，请允许我指出，我所说的是翻译，而不是

位置：绝对的
css3转换（这些都很好，但一旦你得到足够的转换，它们就不再有趣了）

你们能想出什么美观的解决方案让一个元素在固定的时间内从屏幕上消失

示例代码可以在演示基本概念的JSFIDLE中找到。

（更多信息请参见下面我自己的答案）
一个非常简单但不美观的解决方案是动态定义类：

var stylesheet = document.styleSheets[0];
var ruleBlockHide;

及

见：

需要保留对规则的引用的原因是，每次调整屏幕大小后，必须删除并重新添加规则

虽然这个解决方案完成了任务，但必须有一些DOM/CSS组合，这将允许在不使用javascript的情况下完成（类似于包含这样一个块的100%x100%元素，但我无法找到任何基于转换的方法）。
使用
calc
方法（）：

因为您使用的是
-webkit
前缀，所以我也使用了它。
calc
受到大多数浏览器的支持：
我最近构建了一个应用程序，它使用这种技术将应用程序的“面板”（或页面）和选项卡滑入或滑出视图

基本上（说明概念的pesudo代码，减去前缀等）：

。最后，我不得不使用脚本获取视口宽度并以像素为单位指定值，然后

但最终，尽管只有这些针对特定平台的小问题，但这对我来说非常有效。
我知道这并不完全是你想要的，但是

<>你会考虑使用CSS动画吗？它非常快（它声称它比jQuery快20倍），您可以在这里看到速度测试：

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

我在这里创建了一个JSFIDLE：

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

document.querySelector("button").addEventListener("click",function(){
    var toAnimate = document.querySelector(".block");
    TweenMax.to(toAnimate, 2, {y: -window.innerHeight});
});

CSS:

获取文档宽度。然后使用java脚本触发器触发css3转换

       function translate(){

       var width = document.body.Width;
        document.getElementById('whateverdiv').style='translateX(' + width + 'px)';

       }

如果使用容器包装.block div：

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

以这种风格

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

通过这种方式，可以应用正确的翻译百分比（略高于100%，只是为了让它不碍事）并保持按钮可点击

您可以在这里看到一个工作示例：

附言：我注意到只有transition属性才需要transition delay，否则动画就会失败，可能是因为它试图在具有实际高度值之前启动。如果将水平消失与translateX一起使用，则可以省略该选项
 这很简单
将以下内容添加到您的div

.myDiv {
    -webkit-transition-property: left;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-delay: initial
}

然后通过添加额外的类或jQuery来更改它的“left”属性

这将沿x轴设置动画

注意：您可以将-webkit transition属性更改为您想要的任何属性，这将为其设置动画
我所做的是使用
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))

我似乎没有足够精确地说明这个问题，问题是百分比是根据元素的大小计算的，这对于视口高度为100%的元素来说很好，但对于任何其他元素来说都不行。由于元素周围区域上的单击事件，因此不能将其包装到具有该大小的父元素中。在这种情况下，听起来动态样式表可能是一种方法。我将尝试挖掘那个脚本并更新我的答案。我已经在我的答案中这样做了（见下文），但我想知道一个不会将样式与脚本混合的解决方案。。。好吧，我要等着看别人是否有好的想法，否则我就同意你的答案。我断断续续地看了一个月：（（正如你所看到的，我最初的问题是风滚草）。我找不到我使用的确切代码-我已经失去了对项目源代码的访问权（是合同上的）我的笔记本电脑有一个本地签出窗口。但本质上，在伪代码中，你要编写一个函数来确定视口尺寸，并在DOM ready上动态编写样式规则，然后在window resize（考虑方向变化）上限制它（避免桌面上的堆栈溢出）。不理想，但它使阅读和管理更为简洁。我说的是GPU加速翻译，而不是重新定位绝对定位的元素…从你的问题中，我了解到你想以一种很好的方式将框移出屏幕。你没有提到GPU加速的需要。如果你想，你可以添加：
transform:translate3d（0,0,0）；-webkit transform:translate3d（0,0,0）；
到
.block
类，然后
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%);
}

.myDiv {
    -webkit-transition-property: left;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-delay: initial
}

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

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