html - Best way to translate an element off-screen? -

I'm using CSS3 conversions for a while but the one thing that's a bit messy is related to percentages The element that you are moving, rather than the original element, makes sense but it brings about some situations which I do not know is the best way to solve.

For example, if we were imagining an element positioned on the screen, how would you go about transitioning that element off-screen? The element's dimension can be as small as 200x200 pixels, which means that you can not use percentages without calculating anything.

The options given by me have been put in my head:

1) Place the element inside the screen-size container, then translate the container to 100%.

2) Translate the element into your GPU layer, with translate-change, or translation 3D, then apply the appropriate left / right properties.

3) Use getBoundingClientRect to determine where the element is in relation to the viewport, calculate the distance in pixels, which will need to be applied to leave the element to leave the screen , Then apply that value as an inline translation style.

Can I give some advice on the best advice to handle such a situation? The factor to consider is that the technique will be used in the responsive site, so to calculate any value will be required immediately before applying technology.

What do I do in the position of off-screen or parental status, position properties It is natural to use it; Above / left / right / bottom is animatable, so they transit well; And the third advantage is that there is a great support for these qualities, so even though the browser is ancient, the situation in the fallback situation not only works for the transition.

Consider the following:

  & lt; Div class = "parent" & gt; & Lt; Div class = "to-bottom" & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

CSS:

 . Parent {height: 400px; Width: 400px; Background color: #ccc; Status: Relative; / * Make sure the parenting position is * / overflow: hidden; / * Hide its overflow * Down-down-down {width: 100px; Height: 100 pixels; Status: Completed; top 100%; / * 100% to see the top element completely below * / left: 0; Correct: 0; Background-color: yellow-green; Transition: Top .3s ease; }. Parent: Hover .from-the-bottom {top: 0; / * Change the top value position in terms of its element / /