From 1dab85c00ff23c0df7ca8fe4e3c6acfbac7dc7e7 Mon Sep 17 00:00:00 2001
From: Chris Mills <chrisdavidmills@gmail.com>
Date: Mon, 25 Mar 2024 10:18:24 +0000
Subject: [PATCH] Fixes for pepelsbey review comments
---
view-transitions/mpa/index.html | 1 -
view-transitions/mpa/index.js | 13 -------------
view-transitions/mpa/page2.html | 1 -
view-transitions/mpa/styles.css | 10 ++++++----
4 files changed, 6 insertions(+), 19 deletions(-)
delete mode 100644 view-transitions/mpa/index.js
diff --git a/view-transitions/mpa/index.html b/view-transitions/mpa/index.html
index 09e4215c..6ff7286c 100644
--- a/view-transitions/mpa/index.html
+++ b/view-transitions/mpa/index.html
@@ -5,7 +5,6 @@
<meta charset="utf-8">
<title>Cross-document view transition example: Page 1</title>
<link rel="stylesheet" href="styles.css">
- <script defer src="index.js"></script>
</head>
<body>
diff --git a/view-transitions/mpa/index.js b/view-transitions/mpa/index.js
deleted file mode 100644
index 65305eee..00000000
--- a/view-transitions/mpa/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-console.log("script loaded");
-
-window.addEventListener("pageswap", event => {
- console.log("pageswap fired");
- // event.viewTransition.skipTransition();
-});
-
-
-window.addEventListener("pagereveal", event => {
- console.log("pagereveal fired");
- // event.viewTransition.skipTransition();
-});
-
diff --git a/view-transitions/mpa/page2.html b/view-transitions/mpa/page2.html
index fcd888fc..9b1fba20 100644
--- a/view-transitions/mpa/page2.html
+++ b/view-transitions/mpa/page2.html
@@ -5,7 +5,6 @@
<meta charset="utf-8">
<title>Cross-document view transition example: Page 2</title>
<link rel="stylesheet" href="styles.css">
- <script defer src="index.js"></script>
</head>
<body>
diff --git a/view-transitions/mpa/styles.css b/view-transitions/mpa/styles.css
index 1a1f244e..13c7689f 100644
--- a/view-transitions/mpa/styles.css
+++ b/view-transitions/mpa/styles.css
@@ -34,14 +34,14 @@ p {
navigation: auto;
}
-/* Customize the default animation */
+/* Customize the default animation behavior */
-/* ::view-transition-old(root),
+::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.5s;
-} */
+}
-/* create a new animation */
+/* Create a custom animation */
@keyframes move-out {
from {
@@ -63,6 +63,8 @@ p {
}
}
+/* Apply the custom animation to the old and new page states */
+
::view-transition-old(root) {
animation: 0.4s ease-in both move-out;