mw.ViewPageTarget: Fix broken firstHeading transition

Class ve-init-mw-viewPageTarget-pageTitle added various
transition settings that were never used. Meanwhile, we're doing
fadeTo which sets inline opacity css every X ms until the
animation is finished.

* Changed the inline jQuery animation  to use css transitions
  instead.
* Removed the inexistent and obsolete ms-transition declaration.
* Removed ":visible" from selector query. This makes the selector
  more performant (since :visible is a proprietary Sizzle keyword)
  and it was obsolete anyway. The classes don't affect display none/hide,
  this is handled naturally by the browser now.

Change-Id: Ibdfb442ff6c743ef16b514a7696796ee27821887
This commit is contained in:
Timo Tijhof 2013-10-06 22:09:33 +02:00
parent 7f01c9fadc
commit 66ff702561
2 changed files with 20 additions and 5 deletions

View file

@ -7,12 +7,22 @@
/* VisualEditor */
.ve-init-mw-viewPageTarget-pageTitle {
.ve-init-mw-viewPageTarget-transform {
-webkit-transition: opacity 200ms ease-out;
-moz-transition: opacity 200ms ease-out;
-ms-transition: opacity 200ms ease-out;
-o-transition: opacity 200ms ease-out;
transition: opacity 200ms ease-out;
}
.ve-init-mw-viewPageTarget-transform-muted {
opacity: 0.6;
}
.ve-init-mw-viewPageTarget-transform-hidden {
opacity: 0;
}
.ve-init-mw-viewPageTarget-pageTitle {
cursor: default;
}

View file

@ -1893,8 +1893,10 @@ ve.init.mw.ViewPageTarget.prototype.transformPageTitle = function () {
* @method
*/
ve.init.mw.ViewPageTarget.prototype.mutePageTitle = function () {
$( '#firstHeading, #siteSub:visible' ).fadeTo( 'fast', 0.6 );
$( '#contentSub:visible' ).fadeTo( 'fast', 0 );
$( '#firstHeading, #siteSub' )
.addClass( 've-init-mw-viewPageTarget-transform ve-init-mw-viewPageTarget-transform-muted' );
$( '#contentSub' )
.addClass( 've-init-mw-viewPageTarget-transform ve-init-mw-viewPageTarget-transform-hidden' );
};
/**
@ -1903,8 +1905,11 @@ ve.init.mw.ViewPageTarget.prototype.mutePageTitle = function () {
* @method
*/
ve.init.mw.ViewPageTarget.prototype.restorePageTitle = function () {
$( '#firstHeading, #siteSub:visible, #contentSub:visible' ).fadeTo( 'fast', 1 );
var $els = $( '#firstHeading, #siteSub, #contentSub' )
.removeClass( 've-init-mw-viewPageTarget-transform-muted ve-init-mw-viewPageTarget-transform-hidden' );
setTimeout( function () {
$els.removeClass( 've-init-mw-viewPageTarget-transform' );
$( '#firstHeading' ).removeClass( 've-init-mw-viewPageTarget-pageTitle' );
}, 1000 );
};