component.MagicMoveText: transitionTime_ config #6475

Author: tobiu

examples/component/magicmovetext/MainContainer.mjs

@@ -39,28 +39,33 @@ class MainContainer extends ConfigurationViewport {
             module   : TextField,
             labelText: 'colorFadeIn',
             listeners: {change: me.onConfigChange.bind(me, 'colorFadeIn')},
-            style    : {marginTop: '10px'},
             value    : exampleComponent.colorFadeIn
         }, {
             module   : TextField,
             labelText: 'colorFadeOut',
             listeners: {change: me.onConfigChange.bind(me, 'colorFadeOut')},
-            style    : {marginTop: '10px'},
             value    : exampleComponent.colorFadeOut
         }, {
             module   : TextField,
             labelText: 'colorMove',
             listeners: {change: me.onConfigChange.bind(me, 'colorMove')},
-            style    : {marginTop: '10px'},
             value    : exampleComponent.colorMove
         }, {
             module   : TextField,
             clearable: false,
             labelText: 'fontFamily',
             listeners: {change: me.onConfigChange.bind(me, 'fontFamily')},
-            style    : {marginTop: '10px'},
             value    : exampleComponent.fontFamily,
             width    : 300
+        }, {
+            module   : NumberField,
+            clearable: false,
+            labelText: 'transitionTime',
+            listeners: {change: me.onConfigChange.bind(me, 'transitionTime')},
+            maxValue : 900,
+            minValue : 50,
+            stepSize : 50,
+            value    : exampleComponent.transitionTime
         }]
     }
 

resources/scss/src/component/MagicMoveText.scss

@@ -1,6 +1,7 @@
 .neo-magic-move-text {
-    --neo-height: 100px;
-    --neo-width : 450px;
+    --neo-height         : 100px;
+    --neo-transition-time: 500ms;
+    --neo-width          : 450px;
 
     align-items     : center;
     background-color: #000;
@@ -19,7 +20,10 @@
 
         > * {
             position  : absolute;
-            transition: color .5s ease-out, left .5s ease-out, opacity .5s ease-out;
+            transition:
+                    color   0.2s ease-out,
+                    left    var(--neo-transition-time) ease-out,
+                    opacity var(--neo-transition-time) ease-out;
         }
     }
 

src/component/MagicMoveText.mjs

@@ -53,6 +53,11 @@ class MagicMoveText extends Component {
          * @member {String} text_=null
          */
         text_: null,
+        /**
+         * Time in ms for the fadeIn, fadeOut and move character OPs
+         * @member {Number} transitionTime_=500
+         */
+        transitionTime_: 500,
         /**
          * @member {Object} _vdom
          */
@@ -160,6 +165,17 @@ class MagicMoveText extends Component {
         }
     }
 
+    /**
+     * Triggered after the transitionTime config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetTransitionTime(value, oldValue) {
+        this.vdom.style['--neo-transition-time'] = value + 'ms';
+        this.update()
+    }
+
     async measureChars() {
         let me = this,
             {measureElement} = me,
@@ -235,7 +251,6 @@ class MagicMoveText extends Component {
         });
 
         await me.promiseUpdate();
-        await me.timeout(20);
 
         charsContainer.forEach(charNode => {
             if (charNode.flag === 'remove') {
@@ -247,7 +262,7 @@ class MagicMoveText extends Component {
         });
 
         await me.promiseUpdate();
-        await me.timeout(500);
+        await me.timeout(me.transitionTime);
 
         charsContainer.sort((a, b) => parseFloat(a.style.left) - parseFloat(b.style.left));