It's a CSS animation though, not jQuery. And with no layout change impact afaik (only opacity).

The transition is specified in CSS as taking 200ms, but that shouldn't be a cost against something else as in this case I believe the transition is desired for UX and (other than general C/GPU cost) shouldn't be interfering with the javascript execution from the separate thread.

What's weird about this opacity transition is that opacity: 0.6; is applied two different ways:

• To h1#firstHeading and div#siteSub through class="ve-init-mw-viewPageTarget-muted" and transitioned because of class="ve-init-mw-viewPageTarget-transform"
• To div#jump-to-nav and div#mw-content-text through style="opacity: 0.6;" (i.e. inline style), with no transition

So by far the largest area that gets 60% opacity (the content area) doesn't get a transition, only a few little things do. That seems silly.

(Also we should probably not use a mix of inline styles and classes.)

In T88590#1015718, @Krinkle wrote:

I believe the transition is desired for UX and (other than general C/GPU cost) shouldn't be interfering with the javascript execution from the separate thread.

Depends on the browser. Not true for Firefox, even on the latest nightly.

See the experiment on http://www.phpied.com/css-animations-off-the-ui-thread/.

@Catrope Yeah, we should consolidate those. Maybe we can use an overall class and use descendant selectors instead of adding it to individual elements in JavaScript. Less DOM actions and ensures they start at the same time.

So instead of

.fade {
 opacity: 0.6;
}

$foo.addClass();
$bar.addClass();
$head.addClass();

$foo.removeClass();
$bar.removeClass();

.. we'd do

.ve-loading .foo,
.ve-loading .bar,
.ve-loading .head,
.ve-activated .head {
  opacity: 0.6;
}

$container.addClass();
$container.removeClass();

Change 188733 had a related patch set uploaded (by Krinkle):
mw.ViewPageTarget: Use CSS instead of JS for DOM hiding/muting

https://gerrit.wikimedia.org/r/188733

Patch-For-Review

Change 188733 merged by jenkins-bot:
mw.ViewPageTarget: Use CSS instead of JS for DOM hiding/muting

https://gerrit.wikimedia.org/r/188733