mediawiki.action.edit.preview: Use CSS instead of jQuery for animation

Change-Id: I9f79ddf2cf4548dbf8b8553da030d6da4772187e

diff --git a/resources/Resources.php b/resources/Resources.php
index 92b4fd4..f510329 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1365,6 +1365,7 @@ return [
        ],
        'mediawiki.action.edit.preview' => [
                'scripts' => 'resources/src/mediawiki.action/mediawiki.action.edit.preview.js',
+               'styles' => 'resources/src/mediawiki.action/mediawiki.action.edit.preview.css',
                'dependencies' => [
                        'jquery.spinner',
                        'jquery.textSelection',

diff --git a/resources/src/mediawiki.action/mediawiki.action.edit.preview.css b/resources/src/mediawiki.action/mediawiki.action.edit.preview.css
new file mode 100644 (file)
index 0000000..87030df
--- /dev/null
+++ b/resources/src/mediawiki.action/mediawiki.action.edit.preview.css
@@ -0,0 +1,7 @@
+.mw-preview-copyelements {
+       transition: opacity 200ms;
+}
+
+.mw-preview-copyelements-loading {
+       opacity: 0.4;
+}

diff --git a/resources/src/mediawiki.action/mediawiki.action.edit.preview.js b/resources/src/mediawiki.action/mediawiki.action.edit.preview.js
index 3af8222..7f2dbdd 100644 (file)
--- a/resources/src/mediawiki.action/mediawiki.action.edit.preview.js
+++ b/resources/src/mediawiki.action/mediawiki.action.edit.preview.js
@@ -71,11 +71,7 @@
                        $spinner.show();
                }
 
-               // Can't use fadeTo because it calls show(), and we might want to keep some elements hidden
-               // (e.g. empty #catlinks)
-               // FIXME: Use CSS transition
-               // eslint-disable-next-line no-jquery/no-animate
-               $copyElements.animate( { opacity: 0.4 }, 'fast' );
+               $copyElements.addClass( [ 'mw-preview-copyelements', 'mw-preview-copyelements-loading' ] );
 
                api = new mw.Api();
                postData = {
@@ -259,11 +255,7 @@
                        mw.hook( 'wikipage.editform' ).fire( $editform );
                } ).always( function () {
                        $spinner.hide();
-                       // FIXME: Use CSS transition
-                       // eslint-disable-next-line no-jquery/no-animate
-                       $copyElements.animate( {
-                               opacity: 1
-                       }, 'fast' );
+                       $copyElements.removeClass( 'mw-preview-copyelements-loading' );
                } ).fail( function ( code, result ) {
                        // This just shows the error for whatever request failed first
                        var errorMsg = 'API error: ' + code;