simonaco / page-transitions-travelapp

Travel App, Native-like Page Transitions

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.

page-transitions-travelapp's Issues

Docker build fails

Docker build fails with error message:
Step 1/6 : FROM nginx:alpine
alpine: Pulling from library/nginx
no matching manifest for linux/amd64 in the manifest list entries
Exited with code 1

Issue on group page

Hello,

when I clicked on a person in the group page, the first lady is showing big (it's a mistake comparing to the vue/nuxt verison

Font loading isn't working

page-transitions-travelapp/src/index.html

Line 12 in 430c966

<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Playfair+Display" rel="preload" as="font">

Why not just the plain old rel="stylesheet"?

From Chrome DevTools:

The resource https://fonts.googleapis.com/css?family=Josefin+Sans|Playfair+Display was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

Code cleaup

There are a lot of unused imports, code style issues. I could prepare PR with cleanups ;)

Add button is full-size in Firefox

Just a heads-up: it looks like that in Firefox the plus icon from the add button is covering the entire page.

"Sophia's Home" nav link stays active

"Sophia's Home" header navigation link stays active, when user navigates to any other link (ex. Sophia's Group Trips)