From 72120da55f134c144dd2495ae5fd329fec455637 Mon Sep 17 00:00:00 2001 From: "labs-code-app[bot]" <161369871+labs-code-app[bot]@users.noreply.github.com> Date: Thu, 19 Dec 2024 18:31:55 +0000 Subject: [PATCH 1/3] Add view transitions using MPA pattern to Twenty Seventeen theme. Implements view transitions in the Twenty Seventeen theme using the MPA pattern of the View Transitions API. --- .../themes/twentyseventeen/assets/js/global.js | 10 ++++++++++ src/wp-content/themes/twentyseventeen/style.css | 13 +++++++++++++ 2 files changed, 23 insertions(+) diff --git a/src/wp-content/themes/twentyseventeen/assets/js/global.js b/src/wp-content/themes/twentyseventeen/assets/js/global.js index cb9bc36624c02..c95d5c78c6cf2 100644 --- a/src/wp-content/themes/twentyseventeen/assets/js/global.js +++ b/src/wp-content/themes/twentyseventeen/assets/js/global.js @@ -249,4 +249,14 @@ $body.addClass( 'has-header-video' ); }); + + $(document).ready(function() { + $('a').each(function() { + if (this.href && this.href !== window.location.href) { + $(this).attr('view-transition', 'page-transition'); + } + }); + }); + + })( jQuery ); diff --git a/src/wp-content/themes/twentyseventeen/style.css b/src/wp-content/themes/twentyseventeen/style.css index f1f347fc3fb70..c5768b1549565 100644 --- a/src/wp-content/themes/twentyseventeen/style.css +++ b/src/wp-content/themes/twentyseventeen/style.css @@ -61,6 +61,19 @@ html { -webkit-text-size-adjust: 100%; } +@keyframes page-transition { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.site-content { + view-transition-name: page-transition; +} + body { margin: 0; } From 6352aad4d0608a778fea914b915c9a34d631074a Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Thu, 19 Dec 2024 13:17:30 -0700 Subject: [PATCH 2/3] Try: navigation: auto --- .../themes/twentyseventeen/assets/js/global.js | 10 ---------- src/wp-content/themes/twentyseventeen/style.css | 13 ++----------- 2 files changed, 2 insertions(+), 21 deletions(-) diff --git a/src/wp-content/themes/twentyseventeen/assets/js/global.js b/src/wp-content/themes/twentyseventeen/assets/js/global.js index c95d5c78c6cf2..cb9bc36624c02 100644 --- a/src/wp-content/themes/twentyseventeen/assets/js/global.js +++ b/src/wp-content/themes/twentyseventeen/assets/js/global.js @@ -249,14 +249,4 @@ $body.addClass( 'has-header-video' ); }); - - $(document).ready(function() { - $('a').each(function() { - if (this.href && this.href !== window.location.href) { - $(this).attr('view-transition', 'page-transition'); - } - }); - }); - - })( jQuery ); diff --git a/src/wp-content/themes/twentyseventeen/style.css b/src/wp-content/themes/twentyseventeen/style.css index c5768b1549565..0d066d2a7a0a1 100644 --- a/src/wp-content/themes/twentyseventeen/style.css +++ b/src/wp-content/themes/twentyseventeen/style.css @@ -61,17 +61,8 @@ html { -webkit-text-size-adjust: 100%; } -@keyframes page-transition { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -.site-content { - view-transition-name: page-transition; +@view-transition { + navigation: auto; } body { From 49740be472167de11939483ee6154cf881fe6324 Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Thu, 19 Dec 2024 16:36:48 -0700 Subject: [PATCH 3/3] add tranition formatting --- .../themes/twentyseventeen/style.css | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/src/wp-content/themes/twentyseventeen/style.css b/src/wp-content/themes/twentyseventeen/style.css index 0d066d2a7a0a1..e62d11c03f33a 100644 --- a/src/wp-content/themes/twentyseventeen/style.css +++ b/src/wp-content/themes/twentyseventeen/style.css @@ -65,6 +65,40 @@ html { navigation: auto; } +/* Mark the `
` element as the element that should transition */ +#content { + view-transition-name: my-main-content; +} + +/* Apply animations to the snapshots */ +/* Note, `main-content` is the view transition name specified in the previous CSS block */ +::view-transition-old(my-main-content) { + animation: 500ms ease-out both slide-out; +} + +::view-transition-new(my-main-content) { + animation: 500ms ease-out both slide-in; +} + +/* Define the animations */ +@keyframes slide-out { + from { + transform: translateX(0); + } + to { + transform: translateX(-100%); + } +} + +@keyframes slide-in { + from { + transform: translateX(100%); + } + to { + transform: translateX(0); + } +} + body { margin: 0; }