Add support for different view transition animations for the default transition type

plugins/view-transitions/css/view-transition-animation-slide.css

@@ -0,0 +1,35 @@
+@property --plvt-view-transition-animation-slide-horizontal-offset {
+	syntax: "<number>";
+	initial-value: 1;
+	inherits: false;
+}
+
+@property --plvt-view-transition-animation-slide-vertical-offset {
+	syntax: "<number>";
+	initial-value: 0;
+	inherits: false;
+}
+
+@keyframes plvt-view-transition-animation-slide-old {
+	to {
+		translate: calc(100vw * var(--plvt-view-transition-animation-slide-horizontal-offset) * -1) calc(100vw * var(--plvt-view-transition-animation-slide-vertical-offset) * -1);
+	}
+}
+
+@keyframes plvt-view-transition-animation-slide-new {
+	from {
+		translate: calc(100vw * var(--plvt-view-transition-animation-slide-horizontal-offset)) calc(100vw * var(--plvt-view-transition-animation-slide-vertical-offset));
+	}
+}
+
+::view-transition-group(*) {
+	animation-duration: 1s;
+}
+
+::view-transition-old(*) {
+	animation-name: plvt-view-transition-animation-slide-old;
+}
+
+::view-transition-new(*) {
+	animation-name: plvt-view-transition-animation-slide-new;
+}

plugins/view-transitions/css/view-transition-animation-swipe.css

@@ -0,0 +1,37 @@
+@property --plvt-view-transition-animation-swipe-horizontal-offset {
+	syntax: "<number>";
+	initial-value: 1;
+	inherits: false;
+}
+
+@property --plvt-view-transition-animation-swipe-vertical-offset {
+	syntax: "<number>";
+	initial-value: 0;
+	inherits: false;
+}
+
+@keyframes plvt-view-transition-animation-swipe-old {
+	to {
+		opacity: 0;
+		translate: calc(100vw * var(--plvt-view-transition-animation-swipe-horizontal-offset) * -1) calc(100vw * var(--plvt-view-transition-animation-swipe-vertical-offset) * -1);
+	}
+}
+
+@keyframes plvt-view-transition-animation-swipe-new {
+	from {
+		opacity: 0;
+		translate: calc(100vw * var(--plvt-view-transition-animation-swipe-horizontal-offset)) calc(100vw * var(--plvt-view-transition-animation-swipe-vertical-offset));
+	}
+}
+
+::view-transition-group(*) {
+	animation-duration: 1s;
+}
+
+::view-transition-old(*) {
+	animation-name: plvt-view-transition-animation-swipe-old;
+}
+
+::view-transition-new(*) {
+	animation-name: plvt-view-transition-animation-swipe-new;
+}

plugins/view-transitions/css/view-transition-animation-wipe.css

@@ -0,0 +1,43 @@
+@property --plvt-view-transition-animation-wipe-angle {
+	syntax: "<angle>";
+	initial-value: 270deg;
+	inherits: false;
+}
+
+@property --plvt-view-transition-animation-wipe-progress {
+	syntax: "<number>";
+	initial-value: 0;
+	inherits: false;
+}
+
+@keyframes plvt-view-transition-animation-wipe-new {
+	from {
+		--plvt-view-transition-animation-wipe-progress: 0;
+	}
+	to {
+		--plvt-view-transition-animation-wipe-progress: 1;
+	}
+}
+
+::view-transition-old(*),
+::view-transition-new(*) {
+	mix-blend-mode: normal;
+	backface-visibility: hidden;
+}
+
+::view-transition-old(root) {
+	opacity: 1;
+	transform: none;
+	animation: none 1.2s cubic-bezier(0.45, 0, 0.35, 1.0);
+	animation-fill-mode: both;
+	animation-delay: 0s;
+}
+
+::view-transition-new(root) {
+	opacity: 1;
+	transform: none;
+	animation: plvt-view-transition-animation-wipe-new 1.2s cubic-bezier(0.45, 0, 0.35, 1.0);
+	animation-fill-mode: both;
+	-webkit-mask-image: linear-gradient(var(--plvt-view-transition-animation-wipe-angle), #000 calc(-70% + calc(170% * var(--plvt-view-transition-animation-wipe-progress, 0))), transparent calc(170% * var(--plvt-view-transition-animation-wipe-progress, 0)));
+	mask-image: linear-gradient(var(--plvt-view-transition-animation-wipe-angle), #000 calc(-70% + calc(170% * var(--plvt-view-transition-animation-wipe-progress, 0))), transparent calc(170% * var(--plvt-view-transition-animation-wipe-progress, 0)));
+}

plugins/view-transitions/includes/class-plvt-view-transition-animation-registry.php

@@ -0,0 +1,151 @@
+<?php
+/**
+ * Class 'PLVT_View_Transition_Animation_Registry'.
+ *
+ * @package view-transitions
+ * @since 1.0.0
+ */
+
+/**
+ * Class representing a view transition animation registry.
+ *
+ * @since 1.0.0
+ */
+final class PLVT_View_Transition_Animation_Registry {
+
+	/**
+	 * Registered animation class instances, keyed by slug.
+	 *
+	 * @since 1.0.0
+	 * @var array<string, PLVT_View_Transition_Animation>
+	 */
+	private $registered_animations = array();
+
+	/**
+	 * Map of aliases to their animation slugs.
+	 *
+	 * Includes the animation slug itself to avoid unnecessary conditionals.
+	 *
+	 * @since 1.0.0
+	 * @var array<string, string>
+	 */
+	private $alias_map = array();
+
+	/**
+	 * Registers a view transition animation.
+	 *
+	 * @since 1.0.0
+	 *
+	 * @param string               $slug         Unique animation slug.
+	 * @param array<string, mixed> $config       Animation configuration. See
+	 *                                           {@see PLVT_View_Transition_Animation::__construct()} for possible
+	 *                                           values.
+	 * @param array<string, mixed> $default_args Optional. Default animation arguments. Default empty array.
+	 * @return bool True on success, false on failure.
+	 */
+	public function register_animation( string $slug, array $config, array $default_args = array() ): bool {
+		// Check slug conflict.
+		if ( isset( $this->alias_map[ $slug ] ) ) {
+			_doing_it_wrong(
+				__METHOD__,
+				sprintf(
+					/* translators: %s: duplicate slug */
+					esc_html__( 'The animation slug "%s" conflicts with an existing slug or alias.', 'view-transitions' ),
+					esc_html( $slug )
+				),
+				'1.0.0'
+			);
+			return false;
+		}
+
+		try {
+			$animation = new PLVT_View_Transition_Animation( $slug, $config, $default_args );
+		} catch ( InvalidArgumentException $e ) {
+			_doing_it_wrong(
+				__METHOD__,
+				esc_html( $e->getMessage() ),
+				'1.0.0'
+			);
+			return false;
+		}
+
+		// Check alias conflicts.
+		$aliases = $animation->get_aliases();
+		foreach ( $aliases as $alias ) {
+			if ( isset( $this->alias_map[ $alias ] ) ) {
+				_doing_it_wrong(
+					__METHOD__,
+					sprintf(
+						/* translators: %s: duplicate alias */
+						esc_html__( 'The animation alias "%s" conflicts with an existing slug or alias.', 'view-transitions' ),
+						esc_html( $alias )
+					),
+					'1.0.0'
+				);
+				return false;
+			}
+		}
+
+		$this->registered_animations[ $slug ] = $animation;
+		$this->alias_map[ $slug ]             = $slug;
+		foreach ( $aliases as $alias ) {
+			$this->alias_map[ $alias ] = $slug;
+		}
+
+		return true;
+	}
+
+	/**
+	 * Gets the animation stylesheet for the given alias, as inline CSS.
+	 *
+	 * @since 1.0.0
+	 *
+	 * @param string               $alias Slug or alias to reference the animation with. May be used to alter the
+	 *                                    animation's behavior.
+	 * @param array<string, mixed> $args  Optional. Animation arguments. Default is the animation's default arguments.
+	 * @return string Animation stylesheet, as inline CSS, or empty string if none.
+	 */
+	public function get_animation_stylesheet( string $alias, array $args = array() ): string {
+		if ( ! isset( $this->alias_map[ $alias ] ) ) {
+			return '';
+		}
+
+		return $this->registered_animations[ $this->alias_map[ $alias ] ]->get_stylesheet( $alias, $args );
+	}
+
+	/**
+	 * Returns whether to apply the global view transition names for the given animation alias.
+	 *
+	 * @since 1.0.0
+	 *
+	 * @param string               $alias Slug or alias to reference the animation with. May be used to alter the
+	 *                                    animation's behavior.
+	 * @param array<string, mixed> $args  Optional. Animation arguments. Default is the animation's default arguments.
+	 * @return bool True if the global view transition names should be applied, false otherwise.
+	 */
+	public function use_animation_global_transition_names( string $alias, array $args = array() ): bool {
+		if ( ! isset( $this->alias_map[ $alias ] ) ) {
+			return true;
+		}
+
+		return $this->registered_animations[ $this->alias_map[ $alias ] ]->use_global_transition_names( $alias, $args );
+	}
+
+	/**
+	 * Returns whether to apply the post specific view transition names for the given animation alias.
+	 *
+	 * @since 1.0.0
+	 *
+	 * @param string               $alias Slug or alias to reference the animation with. May be used to alter the
+	 *                                    animation's behavior.
+	 * @param array<string, mixed> $args  Optional. Animation arguments. Default is the animation's default arguments.
+	 * @return bool True if the post specific view transition names should be applied, false otherwise.
+	 */
+	public function use_animation_post_transition_names( string $alias, array $args = array() ): bool {
+		if ( ! isset( $this->alias_map[ $alias ] ) ) {
+			return true;
+		}
+
+		return $this->registered_animations[ $this->alias_map[ $alias ] ]->use_post_transition_names( $alias, $args );
+	}
+}