- this.$notification
- .css( {
- // Don't trigger any mouse events while fading out, just in case the cursor
- // happens to be right above us when we transition upwards.
- pointerEvents: 'none',
- // Set an absolute position so we can move upwards in the animation.
- // Notification replacement doesn't look right unless we use an animation like this.
- position: 'absolute',
- // We must fix the width to avoid it shrinking horizontally.
- width: this.$notification.width()
- } )
- // Fix the top/left position to the current computed position from which we
- // can animate upwards.
- .css( this.$notification.position() );
-
- // This needs to be done *after* notification's position has been made absolute.
- if ( options.placeholder ) {
- // Insert a placeholder with a height equal to the height of the
- // notification plus it's vertical margins in place of the notification
- var $placeholder = $( '<div>' )
- .css( 'height', this.$notification.outerHeight( true ) )
- .insertBefore( this.$notification );
- }
-
- // Animate opacity and top to create fade upwards animation for notification closing
- this.$notification
- .animate( {
- opacity: 0,
- top: '-=35'
- }, {
- duration: options.speed,
- complete: function () {
- // Remove the notification
- $( this ).remove();
- // Hide the area manually after closing the last notification, since it has padding,
- // causing it to obscure whatever is behind it in spite of being invisible (bug 52659).
- // It's okay to do this before getting rid of the placeholder, as it's invisible as well.
- if ( openNotificationCount === 0 ) {
- $area.hide();
- }
- if ( options.placeholder ) {
- // Use a fast slide up animation after closing to make it look like the notifications
- // below slide up into place when the notification disappears
- $placeholder.slideUp( 'fast', function () {
- // Remove the placeholder
- $( this ).remove();
- } );
- }
+ rAF( function () {
+ notif.$notification.removeClass( 'mw-notification-visible' );
+
+ setTimeout( function () {
+ if ( openNotificationCount === 0 ) {
+ // Hide the area after the last notification closes. Otherwise, the padding on
+ // the area can be obscure content, despite the area being empty/invisible (T54659). // FIXME
+ $area.hide();
+ notif.$notification.remove();
+ } else {
+ notif.$notification.slideUp( 'fast', function () {
+ $( this ).remove();
+ } );