Skip to content
Travel App, Native-like Page Transitions
Branch: master
Clone or download
Latest commit 964c79d Mar 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci don't run server Aug 21, 2018
src Fix: NgClass can only toggle CSS classes expressed as strings, got [o… Oct 21, 2018
.editorconfig initial commit May 19, 2018
.gitignore
Dockerfile Use stable nginx image version Aug 29, 2018
LICENSE Add license 🗝️ Aug 22, 2018
README.md
angular.json
nginx.conf Add universal for ssr Aug 21, 2018
package-lock.json
package.json
prerender.ts
server.ts Add universal for ssr Aug 21, 2018
static.paths.ts Add universal for ssr Aug 21, 2018
tsconfig.json
tslint.json
webpack.server.config.js Add universal for ssr Aug 21, 2018
yarn.lock

README.md

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.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.