diff --git a/modules/controller.js b/modules/controller.js index 0da5131ca..6e0893903 100644 --- a/modules/controller.js +++ b/modules/controller.js @@ -41,25 +41,20 @@ function highlight( comment ) { } ); $overlay.prepend( $highlight ); - // Pause for 500ms - // Fade in for 100ms - // Show for 1000ms - // Fade out for 500ms - // (animation durations are defined in CSS) + // Show a highlight with the same timing as the post-edit message (mediawiki.action.view.postEdit): + // show for 3000ms, fade out for 250ms (animation duration is defined in CSS). OO.ui.Element.static.scrollIntoView( $highlight[ 0 ], { padding: { top: 10, bottom: 10 } } ).then( function () { + // Toggle the 'dt-init-highlight-overlay' class only when needed, because using mix-blend-mode + // affects the text rendering of the whole page, disabling subpixel antialiasing on Windows + $overlay.addClass( 'dt-init-highlight-overlay' ); + $highlight.addClass( 'dt-init-highlight-fadein' ); setTimeout( function () { - // Toggle the 'dt-init-highlight-overlay' class only when needed, because using mix-blend-mode - // affects the text rendering of the whole page, disabling subpixel antialiasing on Windows - $overlay.addClass( 'dt-init-highlight-overlay' ); - $highlight.addClass( 'dt-init-highlight-fadein' ); + $highlight.addClass( 'dt-init-highlight-fadeout' ); setTimeout( function () { - $highlight.addClass( 'dt-init-highlight-fadeout' ); - setTimeout( function () { - $highlight.remove(); - $overlay.removeClass( 'dt-init-highlight-overlay' ); - }, 500 ); - }, 1000 + 100 ); - }, 500 ); + $highlight.remove(); + $overlay.removeClass( 'dt-init-highlight-overlay' ); + }, 250 ); + }, 3000 ); } ); } diff --git a/modules/dt.init.less b/modules/dt.init.less index 516ed7652..100d08fec 100644 --- a/modules/dt.init.less +++ b/modules/dt.init.less @@ -81,10 +81,9 @@ .dt-init-highlight-fadein { opacity: 1; - transition: opacity 100ms; } .dt-init-highlight-fadeout { opacity: 0; - transition: opacity 500ms ease-out; + transition: opacity 250ms ease-out; }