diff --git a/README.md b/README.md index 151c2d4..3b1bedb 100644 --- a/README.md +++ b/README.md @@ -134,6 +134,46 @@ the duration of the transition. In this case: See the live example [here](http://marnusw.github.io/react-css-transition-replace#fade-wait). +### Hardware acceleration for smoother transitions + +For even smoother transitions, try to trigger hardware acceleration whenever possible. Here is an example of what you could do for a mobile app transition between pages: + +```css +.page-enter, .page-leave { + position: absolute; + -webkit-transition: transform 250ms ease-in-out, opacity 250ms ease-in-out; + transition: transform 250ms ease-in-out, opacity 250ms ease-in-out; +} + +.page-enter { + left: 100vw; +} + +.page-enter.page-enter-active { + -webkit-transform: translate3d(-100vw, 0, 0); + transform: translate3d(-100vw, 0, 0); +} + +.page-leave { + left: 0; +} + +.page-leave.page-leave-active { + -webkit-transform: translate3d(-100vw, 0, 0); + transform: translate3d(-100vw, 0, 0); +} +``` + +``` + +
+ My page 01 content +
+
+``` + +The use of translate3d instead of 2D translate will trigger hardware acceleration and make your transition even smoother. + ## Tips 1. In general animating `block` or `inline-block` level elements is more stable that `inline` elements. If the