CSS3 Translate Out Of Screen

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 pos

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

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

Solution 3:

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

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

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

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

Solution 4:

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.

But eventually, and in spite of only these minor platform-specific problems, this worked perfectly for me.

Solution 5:

Use calc method (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 -webkit prefix I used it as well. calc is supported by majority of browsers: http://caniuse.com/#search=calc