From c088b1d7963828f3dd5e8ec3a3db46cffed25bde Mon Sep 17 00:00:00 2001
From: taolin <itaolaity@gmail.com>
Date: Thu, 4 May 2023 16:27:23 +0800
Subject: [PATCH] 4

---
 packages/4-TransitionsView/.gitignore         |   9 ++++++++
 packages/4-TransitionsView/.npmrc             |   1 +
 packages/4-TransitionsView/README.md          |   3 +++
 packages/4-TransitionsView/app.vue            |  20 ++++++++++++++++++
 packages/4-TransitionsView/nuxt.config.ts     |   6 ++++++
 packages/4-TransitionsView/package.json       |  15 +++++++++++++
 .../4-TransitionsView/pages/about/index.vue   |  14 ++++++++++++
 .../4-TransitionsView/pages/index/index.vue   |  14 ++++++++++++
 packages/4-TransitionsView/public/favicon.ico | Bin 0 -> 4286 bytes
 packages/4-TransitionsView/tsconfig.json      |   4 ++++
 10 files changed, 86 insertions(+)
 create mode 100644 packages/4-TransitionsView/.gitignore
 create mode 100644 packages/4-TransitionsView/.npmrc
 create mode 100644 packages/4-TransitionsView/README.md
 create mode 100644 packages/4-TransitionsView/app.vue
 create mode 100644 packages/4-TransitionsView/nuxt.config.ts
 create mode 100644 packages/4-TransitionsView/package.json
 create mode 100644 packages/4-TransitionsView/pages/about/index.vue
 create mode 100644 packages/4-TransitionsView/pages/index/index.vue
 create mode 100644 packages/4-TransitionsView/public/favicon.ico
 create mode 100644 packages/4-TransitionsView/tsconfig.json

diff --git a/packages/4-TransitionsView/.gitignore b/packages/4-TransitionsView/.gitignore
new file mode 100644
index 0000000..90e126d
--- /dev/null
+++ b/packages/4-TransitionsView/.gitignore
@@ -0,0 +1,9 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+.DS_Store
diff --git a/packages/4-TransitionsView/.npmrc b/packages/4-TransitionsView/.npmrc
new file mode 100644
index 0000000..c483022
--- /dev/null
+++ b/packages/4-TransitionsView/.npmrc
@@ -0,0 +1 @@
+shamefully-hoist=true
\ No newline at end of file
diff --git a/packages/4-TransitionsView/README.md b/packages/4-TransitionsView/README.md
new file mode 100644
index 0000000..b1ba7c5
--- /dev/null
+++ b/packages/4-TransitionsView/README.md
@@ -0,0 +1,3 @@
+Nuxt 3.4.0 是 Nuxt 3 的最新版本，带来了令人兴奋的新功能，包括对 View Transitions API 的支持
+view-transition-name: selected-film;
+view-transition-name: header;
diff --git a/packages/4-TransitionsView/app.vue b/packages/4-TransitionsView/app.vue
new file mode 100644
index 0000000..b6064cd
--- /dev/null
+++ b/packages/4-TransitionsView/app.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <NuxtPage />
+    <NuxtLink to="/">index</NuxtLink>
+    <NuxtLink to="/about">about</NuxtLink>
+  </div>
+</template>
+
+
+<style>
+/* You can customise the default animation here. */
+
+::view-transition-old(root) {
+  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
+}
+
+::view-transition-new(root) {
+  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in;
+}
+</style>
diff --git a/packages/4-TransitionsView/nuxt.config.ts b/packages/4-TransitionsView/nuxt.config.ts
new file mode 100644
index 0000000..8fc44c9
--- /dev/null
+++ b/packages/4-TransitionsView/nuxt.config.ts
@@ -0,0 +1,6 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+    experimental: {
+        viewTransition: true
+    }
+})
diff --git a/packages/4-TransitionsView/package.json b/packages/4-TransitionsView/package.json
new file mode 100644
index 0000000..8c2c91c
--- /dev/null
+++ b/packages/4-TransitionsView/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@types/node": "^18",
+    "nuxt": "^3.4.3"
+  }
+}
diff --git a/packages/4-TransitionsView/pages/about/index.vue b/packages/4-TransitionsView/pages/about/index.vue
new file mode 100644
index 0000000..52eeb2e
--- /dev/null
+++ b/packages/4-TransitionsView/pages/about/index.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h1 style="margin-left: 200px">About</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style >
+h1 {
+  view-transition-name: header;
+}
+</style>
\ No newline at end of file
diff --git a/packages/4-TransitionsView/pages/index/index.vue b/packages/4-TransitionsView/pages/index/index.vue
new file mode 100644
index 0000000..c1376bf
--- /dev/null
+++ b/packages/4-TransitionsView/pages/index/index.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h1>Index</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style >
+h1 {
+  view-transition-name: header;
+}
+</style>
\ No newline at end of file
diff --git a/packages/4-TransitionsView/public/favicon.ico b/packages/4-TransitionsView/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..18993ad91cfd43e03b074dd0b5cc3f37ab38e49c
GIT binary patch
literal 4286
zcmeHLOKuuL5PjK%MHWVi6lD<!mRb4$mdFuu1m7S&L72}0%nh7nb{xS*IY7K-1~WG>
zOGiR<sv2rs-P1h`ut*jRDypfj@9U}_3E&NVhC}c-e)fS606r6u2w#X;ZXeov|87fL
z!TI})z`sQxSz?%$m}Cpw?WF=YNnu;Mk#t%h*=w(2a7>EbCw`xmFozJ^aNatJY>w+g
ze6a2@u~m#^BZm@8wco9#Crlli0uLb^3E$t2-WIc^#(?t)*@`UpuofJ(Uyh@F>b3Ph
z$D^m8Xq~pTkGJ4Q`Q2)te3mgkWYZ^Ijq|hkiP^9`De={bQQ%heZC$QU2UpP(-tbl8
zPWD2abEew;oat@w`uP3J^YpsgT%~jT(Dk%oU}sa$7|n6hBjDj`+I;RX(>)%<Y^V1u
zxpEJLVzZ2NFGX+1TXChn89VxczG?Ja<o=SJ8n{y5$ezyw`8sz3-<3{&C8oX)|94kh
z+0M_EV^O^m@tH21JEPN_ux%Gy1GUw?U~8Zr)3xvGXUSPO+3I<5aAh6uT<iYgm~_ug
ziEA0#JM$)SV%(oc@>lm_7N{+B7Mu%H?422lE%MBJH!!YTN2oT7xr>>N-8OF$C&qU^
z>vLsa{$0X%q1fjOe3P1mCv#lN{xQ4_*HCSAZjTb1`}mlc+9rl8$B3OP%VT@mch_~G
z7Y+4b{r>9e=M+7vSI;BgB?ryZDY4m>&w<W+!o=%S{hjU42>cHSn81VH1N~`0gvwH{
z8dv#hG|OK`>1;j7tM#B)Z7zDN?{6=dUal}$e<J#b(FPcAa6L9y8G}E@q!eIA^eYgE
GM1KL3x?{8e

literal 0
HcmV?d00001

diff --git a/packages/4-TransitionsView/tsconfig.json b/packages/4-TransitionsView/tsconfig.json
new file mode 100644
index 0000000..a746f2a
--- /dev/null
+++ b/packages/4-TransitionsView/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}