page-transitions-travelapp

by simonaco

Travel App, Native-like Page Transitions

130 Stars 23 Forks Last release: Not found MIT License 85 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Page Transitions Travelapp

Fork

๐Ÿ™‹๐Ÿผ This repository is a rewrite with Angular & Angular Universal of Sarah Drasner's orginal work with Vue & Nuxt.

Live demo: https://page-transitions-travelapp.azurewebsites.net

Original

This demo shows an example of how to achieve native-like page transitions on the web. There's much to be improved here- it's not meant to be a full-fledged web application, just a quick demo to show how this kind of implementation could theoretically work. These concepts can and should be expressed differently in your own application, the sky's the limit here! This is created with Nuxt and Vue.

Article explaining the demo is available at https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web

Build Setup

# install dependencies
$ npm install # Or yarn install

serve with hot reload at http://localhost:4200/

$ ng serve

build for production and launch server

$ npm run build:ssr && npm run serve:ssr

generate static project

$ npm run build:ssr

Runing in Docker

First build the project. See build for details.

Now you can build Docker image:

docker build -t page-transitions-travelapp .

and run it:

docker run -p 80:80 page-transitions-travelapp

Navigate to http://localhost in order to see the containerized application.

Further help

For detailed explanation on how things work, checkout the Angular Universal docs.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.