javascript - CSS3 翻译出屏幕

Question

对于一些元素，现在我在页面上有一些元素，我想将它们翻译出屏幕区域(让它们飞出文档)。在适当的代码中，这应该是可能的，只需将一个类添加到相关元素，然后 css 将处理其余部分。问题在于，如果例如

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

元素首先会以不必要的高速度飞出屏幕不必要的距离。纯粹从美学的 Angular 来看，还有很多不足之处(理论上，例如将来有一天可以引入高度为 10000px 的屏幕)。

(更新)不能使用百分比的问题是 100% 是相对于元素本身，而不是相对于父元素/屏幕尺寸。并且可以将元素包含在全尺寸父元素中，但会因点击事件而造成困惑。在回答了几个问题之后，请允许我指出，我说的是翻译，而不是 position:absolute css3 transitions(这一切都很好，但是一旦你得到足够的它们就不再有趣了) .

你们能想到哪些美观的解决方案可以让元素在固定的时间内从屏幕上移出？

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

(有关更多信息，请参阅下面我自己的回答)

Answer 1

如果用容器包装 .block div:

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

您可以展开，然后在点击事件之后翻译容器本身

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

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

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

P.S:我注意到只有 transitionY 属性需要转换延迟，否则动画会失败，可能是因为它试图在获得实际高度值之前开始。如果您使用带有 translateX 的水平消失，则可以省略它。