4

packages/4-TransitionsView/.gitignore

@@ -0,0 +1,9 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+.DS_Store

packages/4-TransitionsView/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

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;

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>

packages/4-TransitionsView/nuxt.config.ts

@@ -0,0 +1,6 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+    experimental: {
+        viewTransition: true
+    }
+})

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"
+  }
+}

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>

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>

packages/4-TransitionsView/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}