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 0000000..18993ad
Binary files /dev/null and b/packages/4-TransitionsView/public/favicon.ico differ
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"
+}