Routing Single Page Application w HTML/CSS/czysty JS

Question

Witam,

chciałbym uzyskać efekt routing'u, coś a'la wgląd Single Page Application gdy zmieniają się podstrony po kliknięciu button'a. Chciałbym dodać tam jakąś animację, aby drugi content nagle nie pojawiał się znikąd tylko np. wjeżdżał z prawej strony. Próbowałem bawić się z Translate(Y), opacity. Rozwiązanie jest pewnie bardzo proste, ale już nie mam pomysłu jak do tego się zabrać. Mógłby mnie ktoś naprowadzić, ja kto ugryźć. Chciałbym to zrobić w czystym JS'ie w celu nauki. Wiem, że Angularz'e czy Vue coś takiego jest wbudowane.  

Poniżej podsyłam link na JS Bin do mojego projektu. 

JS Bin

Z góry dziękuję i pozdrawiam.

Comments

Użyj transform: translateX(...)

Answer 1

Może @keyframes w css + js ?