TurboReact 项目教程

凌榕萱Kelsey

于 2024-09-28 07:52:37 发布

阅读量980

点赞数 20

本文链接：https://blog.csdn.net/gitblog_00566/article/details/142609647

版权

TurboReact 项目教程

turbo-react A JavaScript library that transitions between static HTML pages on navigation; no app server required. 项目地址: https://gitcode.com/gh_mirrors/tu/turbo-react

1. 项目介绍

TurboReact 是一个 JavaScript 库，旨在通过在导航时仅应用两个 HTML 页面之间的差异来实现页面过渡，而无需创建新文档。这使得在页面之间进行 CSS 过渡成为可能，而无需依赖服务器。TurboReact 是 Turbolinks 的一个插件，因此 Turbolinks 是必需的。

2. 项目快速启动

安装与使用

Ruby on Rails

在 Gemfile 中添加 turbo_react-rails gem：
```
gem 'turbo_react-rails'
```
安装更新后的 gem：
```
$ bundle install
```
在每个页面上，在 application.js 中要求 "turbo-react" 库，例如：
```
//= require turbolinks
//= require turbo-react
```

纯 HTML 和其他框架

通过 NPM 或从 GitHub 下载最新版本获取 turbo-react：

$ yarn install turbo-react

或者

$ curl https://raw.githubusercontent.com/ssorallen/turbo-react/v0.9.0/public/dist/turbo-react.min.js

在每个页面的 <head> 中包含 turbo-react，在 Turbolinks 之后：

<!DOCTYPE html>
<html>
<head>
    <script src="path/to/turbolinks.js"></script>
    <script src="path/to/turbo-react.min.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

示例代码

以下是一个简单的示例，展示如何在页面之间过渡背景颜色：

<!-- page1.html -->
<body class="bg-skyblue">
    <a href="page2.html">Page 2</a>
</body>

<!-- page2.html -->
<body class="bg-yellow">
    <a href="page1.html">Page 1</a>
</body>

/* style.css */
body {
    height: 100%;
    margin: 0;
    transition: background-color 0.5s;
    width: 100%;
}

.bg-skyblue {
    background-color: skyblue;
}

.bg-yellow {
    background-color: yellow;
}