CSS3 translate out of screen

Question

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

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).

(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?

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)

Answer 1

If you wrap the .block div with a container:

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

you could expand and then, translate the container itself after the 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.

You could see a working example here : 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.

Answer 2

What I did is use the vh (view height) unit. It's always relative to the screen size, not the element itself:

/* 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:

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