Explore view transitions in Twenty Fifteen for post title and featured image specifically.

Author: Felix Arntz

src/wp-content/themes/twentyfifteen/css/view-transitions.css

@@ -0,0 +1,3 @@
+@view-transition {
+	navigation: auto;
+}

src/wp-content/themes/twentyfifteen/functions.php

@@ -474,6 +474,21 @@ function twentyfifteen_scripts() {
 			'collapse' => '<span class="screen-reader-text">' . __( 'collapse child menu', 'twentyfifteen' ) . '</span>',
 		)
 	);
+
+	wp_enqueue_style(
+		'twentyfifteen-view-transitions',
+		get_template_directory_uri() . '/css/view-transitions.css',
+		array(),
+		'20250115'
+	);
+
+	// This script must be loaded prior to rendering, i.e. not in the footer and not deferred or async.
+	wp_enqueue_script(
+		'twentyfifteen-view-transitions',
+		get_template_directory_uri() . '/js/view-transitions.js',
+		array(),
+		'20250115'
+	);
 }
 add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
 

src/wp-content/themes/twentyfifteen/js/view-transitions.js

@@ -0,0 +1,91 @@
+if ( !! window.navigation && 'CSSViewTransitionRule' in window ) {
+	const getParentElement = ( element, selector ) => {
+		element = element.parentElement;
+		while ( element && element !== document ) {
+			if ( ! selector || element.matches( selector ) ) {
+				return element;
+			}
+		}
+		return null;
+	};
+
+	const setTemporaryViewTransitionNames = async ( entries, vtPromise ) => {
+		for ( const [ element, name ] of entries ) {
+			if ( ! element ) {
+				continue;
+			}
+			element.style.viewTransitionName = name;
+		}
+
+		await vtPromise;
+
+		for ( const [ element, name ] of entries ) {
+			if ( ! element ) {
+				continue;
+			}
+			element.style.viewTransitionName = '';
+		}
+	};
+
+	window.addEventListener( 'pageswap', ( e ) => {
+		if ( e.viewTransition ) {
+			if ( document.body.classList.contains( 'single' ) ) {
+				const article = document.querySelectorAll( 'article.post' );
+				if ( article.length !== 1 ) {
+					return;
+				}
+
+				setTemporaryViewTransitionNames( [
+					[ article[ 0 ].querySelector( '.entry-title' ), 'post-title' ],
+					[ article[ 0 ].querySelector( '.post-thumbnail' ), 'post-thumbnail' ],
+				], e.viewTransition.finished );
+			} else if ( document.body.classList.contains( 'home' ) || document.body.classList.contains( 'archive' ) ) {
+				const articleLink = document.querySelector( 'article.post a[href="' + e.activation.entry.url + '"]' );
+				if ( ! articleLink ) {
+					return;
+				}
+
+				const article = getParentElement( articleLink, 'article.post' );
+
+				setTemporaryViewTransitionNames( [
+					[ article.querySelector( '.entry-title' ), 'post-title' ],
+					[ article.querySelector( '.post-thumbnail' ), 'post-thumbnail' ],
+				], e.viewTransition.finished );
+			}
+		}
+	} );
+
+	window.addEventListener( 'pagereveal', ( e ) => {
+		if ( ! window.navigation.activation.from ) {
+			return;
+		}
+
+		if ( e.viewTransition ) {
+			if ( document.body.classList.contains( 'single' ) ) {
+				const article = document.querySelectorAll( 'article.post' );
+				if ( article.length !== 1 ) {
+					return;
+				}
+
+				setTemporaryViewTransitionNames( [
+					[ article[ 0 ].querySelector( '.entry-title' ), 'post-title' ],
+					[ article[ 0 ].querySelector( '.post-thumbnail' ), 'post-thumbnail' ],
+				], e.viewTransition.ready );
+			} else if ( document.body.classList.contains( 'home' ) || document.body.classList.contains( 'archive' ) ) {
+				const articleLink = document.querySelector( 'article.post a[href="' + window.navigation.activation.from.url + '"]' );
+				if ( ! articleLink ) {
+					return;
+				}
+
+				const article = getParentElement( articleLink, 'article.post' );
+
+				setTemporaryViewTransitionNames( [
+					[ article.querySelector( '.entry-title' ), 'post-title' ],
+					[ article.querySelector( '.post-thumbnail' ), 'post-thumbnail' ],
+				], e.viewTransition.ready );
+			}
+		}
+	} );
+} else {
+	window.console.warn( 'View transitions not loaded as the browser is lacking support.' );
+}