Best way to translate an element off-screen?

Issue

I've been using CSS3 transforms for a while now but one thing that has been a slight bugbear is that percentages relate to the element you're moving, rather than the parent element. This makes sense but it brings about a few situations I'm not sure the best way of solving.

For example, if we were to imagine an element absolutely positioned on the screen, how would you go about transitioning that element off-screen? The dimensions of the element could be something small like 200x200 pixels, meaning you couldn't use percentages without doing some calculations.

The options I've whittled it down to in my head are:

1) Put the element inside a container that is the size of the screen, then translate the container by 100%.

2) Promote the element to its own GPU layer with translateZ, will-change, or translate3d, then apply appropriate left/right properties.

3) Use getBoundingClientRect to determine where the element is in relation to the viewport, do a calculation to determine the distance in pixels that would need to be applied in order to make the element leave the screen, then apply that value as an inline translate style.

Could I please get some advice on the best way to handle a situation like this? Factors to consider are that the technique would be used in a responsive site, so any value calculating would need to be done immediately prior to applying the technique.

Solution

What I do to position something off-screen or outside of the parent is to use position properties. To me this seems natural; top/left/right/bottom are animatable, so they transition nicely; and the third benefit is that there is great support for these properties, so even if the browser is ancient the fallback is the positioning works just not the transition.

Consider the following:

<div class="parent">
    <div class="from-the-bottom"></div>
</div>

CSS:

.parent {
    height: 400px;
    width: 400px;
    background-color: #ccc;
    position: relative; /*Make sure the parent has positioning*/
    overflow: hidden; /*Hide its overflow*/
}

.from-the-bottom {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100%;  /*100% top pushes the element fully out of view at the bottom*/
    left: 0;
    right: 0;
    background-color: yellowgreen;
    transition: top .3s ease;
}

.parent:hover .from-the-bottom {
    top: 0; /*Changing the top value positions the element within the context of it's parent*/
}

Answered By - jme11