nextjs-page-transitions

Travel App, Native-like Page Transitions (:atom: with React & Next.js)

Github stars Tracking Chart

Page Transitions Travelapp

Fork

?, hello there! This repository is a rewrite with React & Next.js of Sarah Drasner's orginal work with Vue & Nuxt.

Live demo: https://page-transitions.now.sh

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

Live demo at
https://page-transitions.com/

See the page transitions travel app demo for a real-life use case: https://github.com/sdras/page-transitions-travelapp

Build Setup

# install dependencies
$ npm install # Or yarn install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm start

For detailed explanation on how things work, checkout the Next.js docs.

Main metrics

Overview
Name With Ownerxavxyz/nextjs-page-transitions
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 1)
Platform
License:MIT License
所有者活动
Created At2018-04-26 13:26:51
Pushed At2021-01-25 18:52:49
Last Commit At2019-01-03 03:33:05
Release Count0
用户参与
Stargazers Count460
Watchers Count12
Fork Count49
Commits Count30
Has Issues Enabled
Issues Count5
Issue Open Count0
Pull Requests Count5
Pull Requests Open Count1
Pull Requests Close Count2
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private