Skip to content

Commit ac22ba5

Browse files
felixarntzfelixarntz
authored
Merge pull request #2051 from nikunj8866/2040-allow-control-over-view-transition-animation-duration
Allow control over view transition animation duration
2 parents 4b31f55 + 636a3c5 commit ac22ba5

File tree

5 files changed

+130
-57
lines changed

5 files changed

+130
-57
lines changed

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@
1010
inherits: false;
1111
}
1212

13+
@property --plvt-view-transition-animation-duration {
14+
syntax: "<time>";
15+
initial-value: 1s;
16+
inherits: false;
17+
}
18+
1319
@keyframes plvt-view-transition-animation-slide-old {
1420
to {
1521
translate: calc(100vw * var(--plvt-view-transition-animation-slide-horizontal-offset) * -1) calc(100vw * var(--plvt-view-transition-animation-slide-vertical-offset) * -1);
@@ -23,7 +29,7 @@
2329
}
2430

2531
::view-transition-group(*) {
26-
animation-duration: 1s;
32+
animation-duration: var(--plvt-view-transition-animation-duration);
2733
}
2834

2935
::view-transition-old(*) {

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@
1010
inherits: false;
1111
}
1212

13+
@property --plvt-view-transition-animation-duration {
14+
syntax: "<time>";
15+
initial-value: 1s;
16+
inherits: false;
17+
}
18+
1319
@keyframes plvt-view-transition-animation-swipe-old {
1420
to {
1521
opacity: 0;
@@ -25,7 +31,7 @@
2531
}
2632

2733
::view-transition-group(*) {
28-
animation-duration: 1s;
34+
animation-duration: var(--plvt-view-transition-animation-duration);
2935
}
3036

3137
::view-transition-old(*) {

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@
1010
inherits: false;
1111
}
1212

13+
@property --plvt-view-transition-animation-duration {
14+
syntax: "<time>";
15+
initial-value: 1s;
16+
inherits: false;
17+
}
18+
1319
@keyframes plvt-view-transition-animation-wipe-new {
1420
from {
1521
--plvt-view-transition-animation-wipe-progress: 0;
@@ -28,15 +34,15 @@
2834
::view-transition-old(root) {
2935
opacity: 1;
3036
transform: none;
31-
animation: none 1.2s cubic-bezier(0.45, 0, 0.35, 1.0);
37+
animation: none var(--plvt-view-transition-animation-duration) cubic-bezier(0.45, 0, 0.35, 1.0);
3238
animation-fill-mode: both;
3339
animation-delay: 0s;
3440
}
3541

3642
::view-transition-new(root) {
3743
opacity: 1;
3844
transform: none;
39-
animation: plvt-view-transition-animation-wipe-new 1.2s cubic-bezier(0.45, 0, 0.35, 1.0);
45+
animation: plvt-view-transition-animation-wipe-new var(--plvt-view-transition-animation-duration) cubic-bezier(0.45, 0, 0.35, 1.0);
4046
animation-fill-mode: both;
4147
-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)));
4248
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/settings.php‎

Lines changed: 71 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -45,30 +45,33 @@ function plvt_get_view_transition_animation_labels(): array {
4545
* @since 1.0.0
4646
* @see plvt_sanitize_view_transitions_theme_support()
4747
*
48-
* @return array{ override_theme_config: bool, default_transition_animation: non-empty-string, header_selector: non-empty-string, main_selector: non-empty-string, post_title_selector: non-empty-string, post_thumbnail_selector: non-empty-string, post_content_selector: non-empty-string, enable_admin_transitions: bool } {
48+
* @return array{ override_theme_config: bool, default_transition_animation: non-empty-string, default_transition_animation_duration: int, header_selector: non-empty-string, main_selector: non-empty-string, post_title_selector: non-empty-string, post_thumbnail_selector: non-empty-string, post_content_selector: non-empty-string, enable_admin_transitions: bool } {
4949
* Default setting value.
5050
*
51-
* @type bool $override_theme_config Whether to override the current theme's configuration. Otherwise,
52-
* the other frontend specific settings won't be applied.
53-
* @type string $default_transition_animation Default view transition animation.
54-
* @type string $header_selector CSS selector for the global header element.
55-
* @type string $main_selector CSS selector for the global main element.
56-
* @type string $post_title_selector CSS selector for the post title element.
57-
* @type string $post_thumbnail_selector CSS selector for the post thumbnail element.
58-
* @type string $post_content_selector CSS selector for the post content element.
59-
* @type bool $enable_admin_transitions Whether to use view transitions in the admin area.
51+
* @type bool $override_theme_config Whether to override the current theme's configuration. Otherwise,
52+
* the other frontend specific settings won't be applied.
53+
* @type string $default_transition_animation Default view transition animation.
54+
* @type int $default_transition_animation_duration Default transition animation duration in milliseconds.
55+
* Added in n.e.x.t
56+
* @type string $header_selector CSS selector for the global header element.
57+
* @type string $main_selector CSS selector for the global main element.
58+
* @type string $post_title_selector CSS selector for the post title element.
59+
* @type string $post_thumbnail_selector CSS selector for the post thumbnail element.
60+
* @type string $post_content_selector CSS selector for the post content element.
61+
* @type bool $enable_admin_transitions Whether to use view transitions in the admin area.
6062
* }
6163
*/
6264
function plvt_get_setting_default(): array {
6365
return array(
64-
'override_theme_config' => false,
65-
'default_transition_animation' => 'fade',
66-
'header_selector' => 'header',
67-
'main_selector' => 'main',
68-
'post_title_selector' => '.wp-block-post-title, .entry-title',
69-
'post_thumbnail_selector' => '.wp-post-image',
70-
'post_content_selector' => '.wp-block-post-content, .entry-content',
71-
'enable_admin_transitions' => false,
66+
'override_theme_config' => false,
67+
'default_transition_animation' => 'fade',
68+
'default_transition_animation_duration' => 1000,
69+
'header_selector' => 'header',
70+
'main_selector' => 'main',
71+
'post_title_selector' => '.wp-block-post-title, .entry-title',
72+
'post_thumbnail_selector' => '.wp-post-image',
73+
'post_content_selector' => '.wp-block-post-content, .entry-content',
74+
'enable_admin_transitions' => false,
7275
);
7376
}
7477

@@ -77,18 +80,20 @@ function plvt_get_setting_default(): array {
7780
*
7881
* @since 1.0.0
7982
*
80-
* @return array{ override_theme_config: bool, default_transition_animation: non-empty-string, header_selector: non-empty-string, main_selector: non-empty-string, post_title_selector: non-empty-string, post_thumbnail_selector: non-empty-string, post_content_selector: non-empty-string, enable_admin_transitions: bool } {
83+
* @return array{ override_theme_config: bool, default_transition_animation: non-empty-string, default_transition_animation_duration: int, header_selector: non-empty-string, main_selector: non-empty-string, post_title_selector: non-empty-string, post_thumbnail_selector: non-empty-string, post_content_selector: non-empty-string, enable_admin_transitions: bool } {
8184
* Stored setting value.
8285
*
83-
* @type bool $override_theme_config Whether to override the current theme's configuration. Otherwise,
84-
* the other frontend specific settings won't be applied.
85-
* @type string $default_transition_animation Default view transition animation.
86-
* @type string $header_selector CSS selector for the global header element.
87-
* @type string $main_selector CSS selector for the global main element.
88-
* @type string $post_title_selector CSS selector for the post title element.
89-
* @type string $post_thumbnail_selector CSS selector for the post thumbnail element.
90-
* @type string $post_content_selector CSS selector for the post content element.
91-
* @type bool $enable_admin_transitions Whether to use view transitions in the admin area.
86+
* @type bool $override_theme_config Whether to override the current theme's configuration. Otherwise,
87+
* the other frontend specific settings won't be applied.
88+
* @type string $default_transition_animation Default view transition animation.
89+
* @type int $default_transition_animation_duration Default transition animation duration in milliseconds.
90+
* Added in n.e.x.t
91+
* @type string $header_selector CSS selector for the global header element.
92+
* @type string $main_selector CSS selector for the global main element.
93+
* @type string $post_title_selector CSS selector for the post title element.
94+
* @type string $post_thumbnail_selector CSS selector for the post thumbnail element.
95+
* @type string $post_content_selector CSS selector for the post content element.
96+
* @type bool $enable_admin_transitions Whether to use view transitions in the admin area.
9297
* }
9398
*/
9499
function plvt_get_stored_setting_value(): array {
@@ -101,18 +106,20 @@ function plvt_get_stored_setting_value(): array {
101106
* @since 1.0.0
102107
*
103108
* @param mixed $input Setting to sanitize.
104-
* @return array{ override_theme_config: bool, default_transition_animation: non-empty-string, header_selector: non-empty-string, main_selector: non-empty-string, post_title_selector: non-empty-string, post_thumbnail_selector: non-empty-string, post_content_selector: non-empty-string, enable_admin_transitions: bool } {
109+
* @return array{ override_theme_config: bool, default_transition_animation: non-empty-string, default_transition_animation_duration: int, header_selector: non-empty-string, main_selector: non-empty-string, post_title_selector: non-empty-string, post_thumbnail_selector: non-empty-string, post_content_selector: non-empty-string, enable_admin_transitions: bool } {
105110
* Sanitized setting.
106111
*
107-
* @type bool $override_theme_config Whether to override the current theme's configuration. Otherwise,
108-
* the other frontend specific settings won't be applied.
109-
* @type string $default_transition_animation Default view transition animation.
110-
* @type string $header_selector CSS selector for the global header element.
111-
* @type string $main_selector CSS selector for the global main element.
112-
* @type string $post_title_selector CSS selector for the post title element.
113-
* @type string $post_thumbnail_selector CSS selector for the post thumbnail element.
114-
* @type string $post_content_selector CSS selector for the post content element.
115-
* @type bool $enable_admin_transitions Whether to use view transitions in the admin area.
112+
* @type bool $override_theme_config Whether to override the current theme's configuration. Otherwise,
113+
* the other frontend specific settings won't be applied.
114+
* @type string $default_transition_animation Default view transition animation.
115+
* @type int $default_transition_animation_duration Default transition animation duration in milliseconds.
116+
* Added in n.e.x.t
117+
* @type string $header_selector CSS selector for the global header element.
118+
* @type string $main_selector CSS selector for the global main element.
119+
* @type string $post_title_selector CSS selector for the post title element.
120+
* @type string $post_thumbnail_selector CSS selector for the post thumbnail element.
121+
* @type string $post_content_selector CSS selector for the post content element.
122+
* @type bool $enable_admin_transitions Whether to use view transitions in the admin area.
116123
* }
117124
*/
118125
function plvt_sanitize_setting( $input ): array {
@@ -131,6 +138,11 @@ function plvt_sanitize_setting( $input ): array {
131138
$value['default_transition_animation'] = $input['default_transition_animation'];
132139
}
133140

141+
// Handle default_transition_animation_duration separately.
142+
if ( isset( $input['default_transition_animation_duration'] ) ) {
143+
$value['default_transition_animation_duration'] = absint( $input['default_transition_animation_duration'] );
144+
}
145+
134146
$selector_options = array(
135147
'header_selector',
136148
'main_selector',
@@ -220,8 +232,9 @@ function plvt_apply_settings_to_theme_support(): void {
220232
$args = $_wp_theme_features['view-transitions'];
221233

222234
// Apply the settings.
223-
$args['default-animation'] = $options['default_transition_animation'];
224-
$selector_options = array(
235+
$args['default-animation'] = $options['default_transition_animation'];
236+
$args['default-animation-duration'] = absint( $options['default_transition_animation_duration'] );
237+
$selector_options = array(
225238
'global' => array(
226239
'header_selector' => 'header',
227240
'main_selector' => 'main',
@@ -304,42 +317,47 @@ static function (): void {
304317
);
305318

306319
$fields = array(
307-
'override_theme_config' => array(
320+
'override_theme_config' => array(
308321
'section' => 'plvt_view_transitions',
309322
'title' => __( 'Override Theme Configuration', 'view-transitions' ),
310323
'description' => __( 'Override the theme provided configuration with the settings below.', 'view-transitions' ),
311324
),
312-
'default_transition_animation' => array(
325+
'default_transition_animation' => array(
313326
'section' => 'plvt_view_transitions',
314327
'title' => __( 'Default Transition Animation', 'view-transitions' ),
315328
'description' => __( 'Choose the animation that is used for the default view transition type.', 'view-transitions' ),
316329
),
317-
'header_selector' => array(
330+
'default_transition_animation_duration' => array(
331+
'section' => 'plvt_view_transitions',
332+
'title' => __( 'Transition Animation Duration', 'view-transitions' ),
333+
'description' => __( 'Control the duration of the view transition. Enter the value in milliseconds (e.g., 1000, 1500, 2000).', 'view-transitions' ),
334+
),
335+
'header_selector' => array(
318336
'section' => 'plvt_view_transitions',
319337
'title' => __( 'Header Selector', 'view-transitions' ),
320338
'description' => __( 'Provide the CSS selector to detect the global header element.', 'view-transitions' ),
321339
),
322-
'main_selector' => array(
340+
'main_selector' => array(
323341
'section' => 'plvt_view_transitions',
324342
'title' => __( 'Main Selector', 'view-transitions' ),
325343
'description' => __( 'Provide the CSS selector to detect the global main element.', 'view-transitions' ),
326344
),
327-
'post_title_selector' => array(
345+
'post_title_selector' => array(
328346
'section' => 'plvt_view_transitions',
329347
'title' => __( 'Post Title Selector', 'view-transitions' ),
330348
'description' => __( 'Provide the CSS selector to detect the post title element.', 'view-transitions' ),
331349
),
332-
'post_thumbnail_selector' => array(
350+
'post_thumbnail_selector' => array(
333351
'section' => 'plvt_view_transitions',
334352
'title' => __( 'Post Thumbnail Selector', 'view-transitions' ),
335353
'description' => __( 'Provide the CSS selector to detect the post thumbnail element.', 'view-transitions' ),
336354
),
337-
'post_content_selector' => array(
355+
'post_content_selector' => array(
338356
'section' => 'plvt_view_transitions',
339357
'title' => __( 'Post Content Selector', 'view-transitions' ),
340358
'description' => __( 'Provide the CSS selector to detect the post content element.', 'view-transitions' ),
341359
),
342-
'enable_admin_transitions' => array(
360+
'enable_admin_transitions' => array(
343361
'section' => 'plvt_admin_view_transitions',
344362
'title' => __( 'WP Admin', 'view-transitions' ),
345363
'description' => __( 'Enable view transitions in the WordPress admin area.', 'view-transitions' ),
@@ -402,6 +420,10 @@ function plvt_render_settings_field( array $args ): void {
402420
$type = 'select';
403421
$choices = plvt_get_view_transition_animation_labels();
404422
break;
423+
case 'default_transition_animation_duration':
424+
$type = 'number';
425+
$choices = array(); // Defined just for consistency.
426+
break;
405427
case 'override_theme_config':
406428
case 'enable_admin_transitions':
407429
$type = 'checkbox';
@@ -458,6 +480,7 @@ class="regular-text code"
458480
} else {
459481
?>
460482
<input
483+
<?php echo ( 'number' === $type ) ? 'type="number"' : ''; ?>
461484
id="<?php echo esc_attr( $args['label_for'] ); ?>"
462485
name="<?php echo esc_attr( "plvt_view_transitions[{$args['field']}]" ); ?>"
463486
value="<?php echo esc_attr( (string) $value ); ?>"

‎plugins/view-transitions/includes/theme.php‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,17 +66,18 @@ function plvt_sanitize_view_transitions_theme_support(): void {
6666
$args = $_wp_theme_features['view-transitions'];
6767

6868
$defaults = array(
69-
'post-selector' => '.wp-block-post.post, article.post, body.single main',
70-
'global-transition-names' => array(
69+
'post-selector' => '.wp-block-post.post, article.post, body.single main',
70+
'global-transition-names' => array(
7171
'header' => 'header',
7272
'main' => 'main',
7373
),
74-
'post-transition-names' => array(
74+
'post-transition-names' => array(
7575
'.wp-block-post-title, .entry-title' => 'post-title',
7676
'.wp-post-image' => 'post-thumbnail',
7777
'.wp-block-post-content, .entry-content' => 'post-content',
7878
),
79-
'default-animation' => 'fade',
79+
'default-animation' => 'fade',
80+
'default-animation-duration' => 1000,
8081
);
8182

8283
// If no specific `$args` were provided, simply use the defaults.
@@ -316,8 +317,16 @@ function plvt_load_view_transitions(): void {
316317
$default_animation_args = isset( $theme_support['default-animation-args'] ) ? (array) $theme_support['default-animation-args'] : array();
317318
$default_animation_stylesheet = $animation_registry->get_animation_stylesheet( $theme_support['default-animation'], $default_animation_args );
318319
if ( '' !== $default_animation_stylesheet ) {
319-
wp_add_inline_style( 'plvt-view-transitions', $default_animation_stylesheet );
320+
$default_animation_stylesheet = plvt_inject_animation_duration( $default_animation_stylesheet, absint( $theme_support['default-animation-duration'] ) );
321+
} else {
322+
$seconds = absint( $theme_support['default-animation-duration'] ) / 1000;
323+
$default_animation_stylesheet = sprintf(
324+
/* translators: %s is animation duration in seconds. */
325+
'::view-transition-group(*) { animation-duration: %ss; }',
326+
$seconds
327+
);
320328
}
329+
wp_add_inline_style( 'plvt-view-transitions', $default_animation_stylesheet );
321330

322331
/*
323332
* No point in loading the script if no specific view transition names are configured.
@@ -365,3 +374,26 @@ function plvt_load_view_transitions(): void {
365374
wp_add_inline_script( 'plvt-view-transitions', $init_script );
366375
wp_enqueue_script( 'plvt-view-transitions' );
367376
}
377+
378+
/**
379+
* Injects the animation duration placeholder in the provided CSS with a value based on the transition duration.
380+
*
381+
* @since n.e.x.t
382+
* @access private
383+
*
384+
* @param string $css The raw CSS string containing the placeholder `plvt-view-transition-duration;`.
385+
* @param int $animation_duration Transition duration in milliseconds. Will be converted to seconds. Defaults to 1000ms if invalid.
386+
* @return string Modified CSS with the actual animation duration in seconds.
387+
*/
388+
function plvt_inject_animation_duration( string $css, int $animation_duration ): string {
389+
$seconds = $animation_duration / 1000;
390+
391+
// Inject animation duration as CSS variable to take effect.
392+
$css .= sprintf(
393+
/* translators: %s is animation duration in seconds. */
394+
'::view-transition-group(*) { --plvt-view-transition-animation-duration: %ss; }',
395+
$seconds
396+
);
397+
398+
return $css;
399+
}

0 commit comments

Comments
 (0)