Cách tạo hiệu ứng chuyển trang trên trang web GatsbyJS tĩnh
GatsbyJS là một trình tạo trang web tĩnh dựa trên React được hỗ trợ bởi GraphQL. Nó giúp bạn có thể viết mã và phát triển trang web của bạn trong khi Gatsby biến nó thành một folder với một file HTML duy nhất với tất cả các nội dung tĩnh của bạn. Về bản chất, Gatsby nhanh và được cấu hình sẵn với các nhân viên dịch vụ, tách mã, kết xuất phía server , tải hình ảnh thông minh, tối ưu hóa nội dung và tìm nạp trước dữ liệu.Tuy nhiên, GatsbyJS không đi kèm với các chuyển đổi trang hoạt hình ra khỏi hộp. Trong hướng dẫn này, để nâng cao khả năng thiết kế giao diện user của bạn, bạn sẽ thấy một số chiến lược để thêm chuyển trang vào ứng dụng GatsbyJS của bạn , chẳng hạn như sử dụng group chuyển tiếp React và sử dụng plugin chuyển tiếp.
Yêu cầu
Để bắt đầu với hướng dẫn này, bạn cần có kiến thức sơ bộ về React.js. Điều này sẽ giúp bạn chuyển mã mà ta sẽ sử dụng ở đây.
Bước 1 - Tạo ứng dụng Gatsby mới
Nếu bạn chưa có, hãy tiếp tục và cài đặt công cụ Gatsby CLI bằng lệnh sau:
- npm install -g gatsby-cli
Với cài đặt đó, giờ đây ta có thể chạy các lệnh cụ thể của Gatsby để tạo, xây dựng và triển khai các ứng dụng của bạn .
Để tạo một dự án Gatsby mới, hãy mở cửa sổ dòng lệnh trong folder bạn muốn và chạy:
- gatsby new transitions-demo
Điều này sẽ tạo một dự án Gatsby mới cho bạn. Bạn có thể chuyển vào folder dự án và chạy lệnh server để chạy server phát triển:
- cd transitions-demo && gatsby develop
Thao tác này sẽ chạy dự án trên localhost:8000 : nếu bạn mở nó trong trình duyệt của bạn , bạn sẽ thấy dự án Gatsby của bạn đang hoạt động.
Bước 2 - Thêm chuyển đổi trang với group chuyển tiếp phản ứng
Group chuyển tiếp React là cách đầu tiên và phổ biến nhất để thêm chuyển tiếp vào các ứng dụng Gatsby. Cần lưu ý đây không phải là một thư viện hoạt ảnh theo thiết kế, vì vậy nó không có khả năng tự tạo các kiểu hoạt hình. Thay vào đó, nó hiển thị các giai đoạn chuyển tiếp, quản lý các lớp và các phần tử group và thao tác DOM theo những cách hữu ích, giúp việc triển khai các chuyển đổi trực quan thực tế dễ dàng hơn nhiều.
Cài đặt phụ thuộc
Hãy tiếp tục và cài đặt nó và chứng minh cách ta có thể tận dụng nó để chuyển đổi giữa các trang trong ứng dụng của bạn .
- npm install react-transition-group
Nó sẽ theo dõi trạng thái entry và exit của các phần tử trong DOM và sau đó áp dụng các chuyển đổi cho chúng tương ứng với các kiểu chuyển tiếp tùy chỉnh của ta .
Gói tiếp theo ta cần cài đặt là plugin bố cục Gatsby. Nó cho ta khả năng cung cấp thuộc tính location cần thiết để chuyển đổi hoạt động và đưa bố cục của ta vào mọi trang.
- npm install gatsby-plugin-layout
Cấu hình GatsbyJS
Việc đầu tiên ta cần làm sau khi cài đặt các phụ thuộc là cấu hình file gatsby-config.js để sử dụng bố cục mà ta vừa cài đặt. Mở file và thêm plugin bố cục vào mảng plugin:
module.exports = { siteMetadata: { title: `Gatsby Default Starter`, description: `My new Gatsby site`, author: `@gatsbyjs`, }, plugins: [ `gatsby-plugin-react-helmet`, { resolve: `gatsby-plugin-layout`, options: { component: require.resolve(`./src/layouts/index.js`), }, }, ], } Để plugin này hoạt động chính xác, ta cần di chuyển file layout từ bên trong folder components folder root của folder src dự án của ta và đổi tên file layout.js thành index.js . Sau đó, trong folder components , tạo một file mới có tên là transition.js để lưu trữ các triển khai logic chuyển tiếp của ta . Sau khi hoàn tất, cấu trúc ứng dụng của ta sẽ trông giống như sau:
Bây giờ hãy tiếp tục và thực hiện các chuyển đổi này trong các trang của ta . Mở file transition.js mà ta đã tạo trong folder components và cập nhật nó bằng mã sau:
import React from "react" import { TransitionGroup, Transition as ReactTransition, } from "react-transition-group" const timeout = 500 const getTransitionStyles = { entering: { position: `absolute`, opacity: 0, }, entered: { transition: `opacity ${timeout}ms ease-in-out`, opacity: 1, }, exiting: { transition: `opacity ${timeout}ms ease-in-out`, opacity: 0, }, } class Transition extends React.PureComponent { render() { const { children, location } = this.props return ( <TransitionGroup> <ReactTransition key={location.pathname} timeout={{ enter: timeout, exit: timeout, }} > {status => ( <div style={{ ...getTransitionStyles[status], }} > {children} </div> )} </ReactTransition> </TransitionGroup> ) } } export default Transition Hãy xem qua đoạn mã theo từng bit. Đầu tiên, ta đã nhập TransitionGroup và ReactTransition từ gói react-transition-group mà ta đã cài đặt trước đó. TransitionGroup giúp ta quản lý việc gắn và tháo các thành phần trong DOM trong khi ReactTransition theo dõi các trạng thái entry và exit của các phần tử được chuyển đến nó.
Tiếp theo, ta đã khai báo một biến timeout sẽ chịu trách nhiệm về thời lượng hoạt ảnh của ta . Sau đó, ta xác định đối tượng getTransitionStyles sẽ chứa các kiểu CSS cho hoạt ảnh của ta . Cuối cùng, ta đã hủy bỏ children và location từ các đạo cụ để dễ sử dụng.
Lưu ý ReactTransition chấp nhận một khóa *key* ={ *location.* pathname} , đó là cách nó theo dõi việc ra vào của các phần tử trong DOM. Cùng với đó, ta áp dụng các kiểu tùy thuộc vào status của trang / phần tử (nhập, thoát, đã nhập) trong DOM.
Đó là nó cho thành phần chuyển tiếp của ta . Điều tiếp theo ta cần làm là sử dụng thành phần này để bọc tất cả các trang của ta . Cách thức hoạt động là ta có thể bọc tất cả các trang trong ứng dụng của bạn dưới dạng children trong thành phần layout và sau đó bọc toàn bộ thành phần layout bằng thành phần chuyển tiếp.
Bằng cách này, vị trí hỗ trợ mà ta đã xác định trong thành phần chuyển tiếp sẽ có hiệu lực và làm sinh động các trang của ta tương ứng khi chúng vào và thoát khỏi DOM. Mở index.js trong folder bố cục và cập nhật nó bằng mã bên dưới.
//src/layouts/index.js import React from "react" import PropTypes from "prop-types" import { StaticQuery, graphql } from "gatsby" import Header from "../components/header" import "./layout.css" import Transition from '../components/transition' const Layout = ({ children, location }) => ( <StaticQuery query={graphql`query SiteTitleQuery { site { siteMetadata { title } } }`} render={data => ( <> <Header siteTitle={data.site.siteMetadata.title} /> <div style={{ margin: `0 auto`, maxWidth: 960, padding: `0px 1.0875rem 1.45rem`, paddingTop: 0, }} > <Transition location = {location}> {children} </Transition> </div> </> )} /> ) Layout.propTypes = { children: PropTypes.node.isRequired, } export default Layout Ở đây, ta đã nhập thành phần Transition mà ta đã tạo trước đó, sau đó ta sử dụng nó để bao bọc phần children , đại diện cho tất cả các trang trong ứng dụng của ta . Ta cũng đã chuyển location hỗ trợ cho thành phần Transition để theo dõi vị trí của các trang khi chúng vào và thoát khỏi DOM.
Cuối cùng, hãy sửa đổi index.js trong folder pages của ta để thêm nhiều trang hơn trên trang chủ để ta có thể kiểm tra quá trình chuyển đổi của bạn . Mở nó và cập nhật nó bằng mã sau:
// src/pages/index.js import React from "react" import { Link } from "gatsby" import SEO from "../components/seo" const IndexPage = () => ( <div> <SEO title="Home" keywords={[`gatsby`, `application`, `react`]} /> <h1>Hi people</h1> <p>Welcome to your new Gatsby site.</p> <p>Now go build something great.</p> <Link to="/blog/">Go to my blog</Link> <br /> <Link to="/about/">Go to my about page</Link> <br /> <Link to="/contact/">Go to my contact page</Link> <br /> <Link to="/404/">404</Link> <br/> <Link to="/page-2/">Go to page 2</Link> </div> ) export default IndexPage Bây giờ khi ta chạy ứng dụng của bạn , ta sẽ thấy tất cả các trang của ta được hiển thị trên trang chủ và khi ta nhấp vào bất kỳ trang nào trong số đó, nó sẽ chuyển sang trang mới như mong đợi.
Bước 3 - Thêm chuyển đổi trang bằng Plugin chuyển đổi trang GatsbyJS
Bước trước đã chỉ ra một cách để chuyển trang trong GatsbyJS. Hãy cùng xem một cách hoàn toàn khác để thực hiện việc này với một plugin chuyển trang. gatsby-plugin-page-transitions là một plugin cho phép bạn thêm các chuyển đổi trang một cách khai báo, cũng như chỉ định các chuyển đổi trang tùy chỉnh cho bất kỳ trang nào trong dự án của bạn.
Giống như trong ví dụ trước, ta sẽ cài đặt các phụ thuộc cần thiết và trình bày cách thêm plugin này vào ứng dụng Gatsby của ta và sử dụng nó để chuyển đổi các trang của ứng dụng của ta .
Cài đặt phụ thuộc
- npm install --save gatsby-plugin-page-transitions
Cấu hình GatsbyJS
Sau khi cài đặt plugin, hãy thêm nó vào dự án của ta thông qua file cấu hình Gatsby trong folder root của dự án của ta . Mở file gatsby-config.js và cập nhật mảng plugin bằng mã sau:
plugins: [ `gatsby-plugin-react-helmet`, `gatsby-plugin-page-transitions`, { resolve: 'gatsby-plugin-page-transitions', options: { transitionTime: 500 } } ] Các loại chuyển đổi
gatsby-plugin-page-transitions cung cấp cho ta các kiểu chuyển đổi khác nhau. Có:
- Chuyển đổi mặc định
- Chuyển đổi tùy chỉnh
- Không có chuyển đổi
- Nhiều chuyển đổi
Hãy bắt đầu với chuyển đổi mặc định, thực sự giống như những gì ta đã thấy trong ví dụ trước. Để quá trình chuyển đổi này hoạt động trong các trang của ta , hãy bao bọc tất cả các trang mà ta cần chuyển đổi bằng plugin.
Để chứng minh điều này, hãy nhập plugin vào trang Chỉ mục của ta và một vài trang khác trong ứng dụng của ta , sau đó chạy ứng dụng.
import React from "react" import { Link } from "gatsby" import SEO from "../components/seo" import Header from "../components/header" import PageTransition from 'gatsby-plugin-page-transitions'; const IndexPage = () => ( <PageTransition> <Header siteTitle="Gatsby Default Starter" /> <h1>Hi people</h1> <p>Welcome to your new Gatsby site.</p> <p>Now go build something great.</p> <Link to="/blog/">Go to my blog</Link> <br /> <Link to="/about/">Go to my about page</Link> <br /> <Link to="/contact/">Go to my contact page</Link> <br /> </PageTransition> ) export default IndexPage Bây giờ khi ta chạy ứng dụng, ta nhận được chính xác các chuyển đổi giống như ta đã có trong ví dụ trước của ta , vì ta đang sử dụng cùng một thời gian chuyển đổi là 500ms.
Bạn có thể đặt thời lượng chuyển đổi ưa thích cho các chuyển đổi của bạn ; Bạn đặt số càng cao, tốc độ chuyển đổi càng chậm.
Loại chuyển đổi tùy chỉnh cho phép bạn linh hoạt để xác định cách bạn muốn các trang của bạn chuyển đổi. Kiểu chuyển tiếp mặc định chỉ thực hiện một loại hoạt ảnh tiết lộ để chuyển đổi trong bất kỳ trang mới nào. Tuy nhiên, bạn có thể làm nhiều hơn thế với plugin. Ví dụ: bạn có thể quyết định chuyển đổi các trang từ bên cạnh trình duyệt hoặc từ trên cùng, phóng to và thu nhỏ các trang, xoay các trang trên màn hình và hơn thế nữa.
Để thực hiện việc này, bạn xác định các kiểu chuyển đổi tùy chỉnh của bạn bằng CSS và chuyển nó vào phần tử PageTransition làm chỗ dựa. Đây là cách ta có thể thay đổi hành vi chuyển đổi mặc định trong các trang Chỉ mục và Giới thiệu thành chuyển đổi trượt tùy chỉnh.
import React from "react" import { Link } from "gatsby" import Header from "../components/header" import PageTransition from 'gatsby-plugin-page-transitions'; const IndexPage = () => ( <PageTransition defaultStyle={{ transition: 'left 500ms cubic-bezier(0.47, 0, 0.75, 0.72)', left: '100%', position: 'absolute', width: '100%', }} transitionStyles={{ entering: { left: '0%' }, entered: { left: '0%' }, exiting: { left: '100%' }, }} transitionTime={500} > <Header siteTitle="Gatsby Default Starter" /> <h1>Hi people</h1> <p>Welcome to your new Gatsby site.</p> <p>Now go build something great.</p> <Link to="/blog/">Go to my blog</Link> <br /><br></br> <Link to="/about/">Go to my about page</Link> <br /><br></br> <Link to="/contact/">Go to my contact page</Link> <br /> </PageTransition> ) export default IndexPage Hãy cập nhật cùng bạn about trang web và chạy các ứng dụng . Bây giờ ta sẽ làm cho các chuyển đổi slide hoạt động trong cả hai trang.
Bạn cũng có thể có nhiều kiểu chuyển tiếp trong các dự án của bạn . Bạn có thể có một chuyển đổi khác nhau cho từng trang trong ứng dụng của bạn nếu bạn muốn. Mối quan tâm duy nhất ở đây là đôi khi quá nhiều kiểu chuyển đổi có thể tác động tiêu cực đến trải nghiệm user .
Nếu bạn quyết định triển khai các chuyển đổi khác nhau trong các trang khác nhau, hãy tạo kiểu riêng cho các phần tử PageTransition trang web và bạn sẽ có các chuyển đổi khác nhau cho các trang khác nhau.
Khắc phục sự tương tác cuộn
Nếu các trang trong ứng dụng của bạn chứa đầy nội dung yêu cầu user phải cuộn hết cỡ xuống cuối trang, bạn có thể gặp một số hành vi kỳ lạ khi các trang web chuyển đổi vào và ra. Điều này là do, theo mặc định, khi có đủ phần tử trên trang, nó sẽ nhảy lên đầu trang trước khi kích hoạt chuyển đổi.
Để khắc phục điều này, ta có thể đặt thời gian chờ cho quá trình chuyển đổi để có thể đợi quá trình chuyển đổi được thực hiện trước khi trang cuộn lên trên cùng. Mở file gatsby-browser.js trong folder root của ứng dụng và cập nhật nó bằng mã sau:
const transitionDelay = 500 exports.shouldUpdateScroll = ({ routerProps: { location }, getSavedScrollPosition, }) => { if (location.action === 'PUSH') { window.setTimeout(() => window.scrollTo(0, 0), transitionDelay) } else { const savedPosition = getSavedScrollPosition(location) window.setTimeout( () => window.scrollTo(...(savedPosition || [0, 0])), transitionDelay ) } return false } Kết luận
Trong hướng dẫn này, ta đã xem xét các cách khác nhau để bạn có thể thực hiện chuyển đổi trang trong các dự án Gatsby của bạn . Trong quá trình này, ta đã xem xét cách cài đặt một dự án Gatsby mới từ đầu, cách cài đặt các phụ thuộc cần thiết cho quá trình chuyển đổi và cách sử dụng chúng để tạo trang.
Bạn có thể tìm thấy mã nguồn cho dự án này tại repository GitHub này . Chuyển đổi giữa các nhánh để trình diễn chuyển tiếp.
Các tin liên quan
