+ Page 1
+ This is the content for page 1.
+ Why not check out page 2?
+
+
+
diff --git a/examples/mini-program-example/src/pages/transition/page-2.html b/examples/mini-program-example/src/pages/transition/page-2.html
new file mode 100644
index 000000000000..30dfa0add0d6
--- /dev/null
+++ b/examples/mini-program-example/src/pages/transition/page-2.html
@@ -0,0 +1,32 @@
+
+
+
+
+ Page 2
+ This is the content for page 2.
+
+ - It
+ - also
+ - has
+ - a
+ - list!
+
+ Ok, that's enough fun, you can go back to page 1.
+
+
+
diff --git a/examples/mini-program-example/src/pages/transition/script.js b/examples/mini-program-example/src/pages/transition/script.js
new file mode 100644
index 000000000000..11dc97c9ebb1
--- /dev/null
+++ b/examples/mini-program-example/src/pages/transition/script.js
@@ -0,0 +1,25 @@
+import { getPageContent, onLinkNavigate } from './utils.js';
+
+onLinkNavigate(async ({ toPath }) => {
+ const content = await getPageContent(toPath);
+
+ startViewTransition(() => {
+ // This is a pretty heavy-handed way to update page content.
+ // In production, you'd likely be modifying DOM elements directly,
+ // or using a framework.
+ // innerHTML is used here just to keep the DOM update super simple.
+ document.body.innerHTML = content;
+ });
+});
+
+
+// A little helper function like this is really handy
+// to handle progressive enhancement.
+function startViewTransition(callback) {
+ if (!document.startViewTransition) {
+ callback();
+ return;
+ }
+
+ document.startViewTransition(callback);
+}
diff --git a/examples/mini-program-example/src/pages/transition/styles.css b/examples/mini-program-example/src/pages/transition/styles.css
new file mode 100644
index 000000000000..9b7834881ee7
--- /dev/null
+++ b/examples/mini-program-example/src/pages/transition/styles.css
@@ -0,0 +1,25 @@
+@keyframes fade-in {
+ from { opacity: 0; }
+}
+
+@keyframes fade-out {
+ to { opacity: 0; }
+}
+
+@keyframes slide-from-right {
+ from { transform: translateX(30px); }
+}
+
+@keyframes slide-to-left {
+ to { transform: translateX(-30px); }
+}
+
+::view-transition-old(root) {
+ animation: 900ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 3000ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(root) {
+ animation: 2100ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+ 3000ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
diff --git a/examples/mini-program-example/src/pages/transition/utils.js b/examples/mini-program-example/src/pages/transition/utils.js
new file mode 100644
index 000000000000..ff26046f1030
--- /dev/null
+++ b/examples/mini-program-example/src/pages/transition/utils.js
@@ -0,0 +1,87 @@
+export async function getPageContent(url) {
+ // This is a really scrappy way to do this.
+ // Don't do this in production!
+ const response = await fetch(url);
+ const text = await response.text();
+ // Particularly as it uses regexp
+ return /