• Login

---

電脳麻将UI 〜 fade-in/out

かつて 電脳麻将 では、画面要素の fade-in/out を jQuery の メソッド で行っていましたが、ver.1.4.2 でCSSの機能で行うように変更しています。

• https://github.com/kobalab/Majiang/issues/77

jQuery ではCSSの opacity の値をタイマーイベントで徐々に変更することで実装していたようです。 これをCSSの transition を使用するように変更します。

例えば、ある要素に

  transition: opacity 0.4s ease-in-out;

と指定すれば、opacity の値が変更されたときに 0.4s の時間をかけて ease-in-out の方法にしたがって表示に反映する値を変更します。 opacity を 0 → 1 とすれば fade-in、1 → 0 とすれば fade-out の効果が得られる訳です。

電脳麻将のUIでは、CSSに以下の設定があることを前提に、@kobalab/majiang-ui のクラス Majiang.UI.Util で show/hide、fadeIn/fadeOut を実装しています。

.hide {
    display: none !important;
}
.fadeout {
    opacity: 0 !important;
}

実装は以下の通りです。

/*
 *  fadein.js
 */
"use strict";

module.exports = {

    show: node => node.removeClass('hide fadeout'),

    hide: node => node.addClass('hide fadeout'),

    fadeIn: node =>{
        node.addClass('hide fadeout');
        setTimeout(()=>{
            node.removeClass('hide');
            setTimeout(()=>
                    node.off('transitionend')
                        .removeClass('fadeout'), 20)
        }, 100);
        return node;
    },

    fadeOut: node =>
        node.on('transitionend', ()=>
                    node.off('transitionend')
                        .addClass('hide'))
            .addClass('fadeout'),
}

show

display と opacity の値を元に戻し、要素を表示させます。

hide

display: none、opacity: 0 とすることで、要素を非表示にします。

fadeIn

いったん display: none、opacity: 0 と非表示にした後、100ms 後に display の値を元に戻し、さらに 20ms 後に transitionend のイベントハンドラを無効にして opacity の値も元に戻します。 いったん非表示にすることで、fadeIn を連続して呼び出しても違和感ない表示になります。

fadeOut

まず、opacity: 0 とし、transitionend イベント発生後に display: none とします。 transitionend イベントは transition で指定した方法で変化を表示し終えたときに発火します。 つまり opacity: 0 に変化し終えた後に display: none とする訳です。

ここで注意すべきことは、hide/fadeOut のときのCSSの値は display: none、opacity: 0 ですが、show/fadeIn のときに両者に設定すべき値は不明だということです^*1。 なので本来の値は変更せず、CSSのクラス hide、fadeout を追加することで値を一時的に変更しています。 クラスを剝ぎ取れば両者は本来の値に戻る訳です。

以下で実際の表示を確認できます。

• デモプログラム(fadeIn)