DOM操作をせずにクラスを追加するには？

Question

環境

Riot.jsを使用しfrontサイドを実装(Riot.js触った事ない方でも大体何をしているかはわかるかと思いますが、riot.js経験者でしたら大歓迎です)

実現したいこと

「saved!」というモーダルをボタンを押したらmodal表示
→表示後どこかclickしたら閉じる

現状、問題点

hideクラスを追加してfadeOutを実装。
DOMを直接指定してクラス追加すればできるが、そうでない場合はどうすればよいのか？
(詳細はコード内に記入しました)

//html部分
<button onclick="{success}" class="btn">Open</button>

//{hide: !ui.success} の設定では、ページ表示時に一瞬modalが表示されfadeOutしてしまう
//** ↑これが一番の問題
<div class="modal {show: ui.success} {hide: !ui.success}">saved!</div>

//JS部分
this.ui = {
    success: false,
    show: false,
};

function show(){
	setTimeout(function(){
	    this.ui.show = true;
	    this.update();
	}.bind(this), 1);
}

success(){
    //↓このようにhideクラスを加えたらできるが、DOM操作無しで実装するには？
    // document.querySelector('.modal').classList.remove('hide');

    //object.assign({hide: true})などでもいいが、やはりページ表示時に一瞬modalが表示されてしまう

    this.ui.success = true;
    this.update();

    show.call(this);
}

document.body.addEventListener("click", function(e) {
    if(e.target.className !== "btn") {
        this.ui.success = false;
        this.ui.show = false;
        this.update();
    }
}.bind(this), false);

//CSS部分
.modal {
    width: 0px;
    height: 0px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    box-shadow: 2px 2px 8px #aaa;
    background: white;
}

.show {
    width: 300px;
    height: 60px;
    animation: fadein 2s ease-in-out;
}

.hide {
    width: 0px;
    height: 0px;
    animation: fadeout 2s ease-in-out;
}

@keyframes fadein {
    0%{
        opacity:0;
        width: 0px;
        height:0px;
    }
    5% {
        width: 300px;
        height: 60px;
    }
    100% {
        opacity:1;
    }
}

@keyframes fadeout {
    0% {
        opacity: 1;
        width: 300px;
        height: 60px;
    }
    99%{
        width: 300px;
        height: 60px;
    }
    100% {
        opacity:0;
    }
}

試してみたこと

defaultでdisplay: none; にし、mount関数内の操作でdisplay: '';にする
(<memo>display: blockではfade out animationの動作はしない)

//html部分
<button onclick="{success}" class="btn">Open</button>

// displayの追加
<div class="modal {show: ui.success} {hide: !ui.success} {none: ui.display}">saved!</div>

//JS部分
//mount関数追加
this.on('mount', function(){
    setTimeout(function(){
        this.ui.display = false;
        this.update();
    }.bind(this),2000);
});

this.ui = {
    success: false,
    show: false,
    display: true, //追加
};

function show(){
	setTimeout(function(){
	    this.ui.show = true;
	    this.update();
	}.bind(this), 1);
}

success(){
    this.ui.success = true;
    this.update();

    show.call(this);
}

document.body.addEventListener("click", function(e) {
    if(e.target.className !== "btn") {
        this.ui.success = false;
        this.ui.show = false;
        this.update();
    }
}.bind(this), false);

//CSS部分
.modal {
    width: 0px;
    height: 0px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    box-shadow: 2px 2px 8px #aaa;
    background: white;
}

.show {
    width: 300px;
    height: 60px;
    animation: fadein 2s ease-in-out;
}

.hide {
    width: 0px;
    height: 0px;
    animation: fadeout 2s ease-in-out;
}

//追加
.none {
    display: none;
}

@keyframes fadein {
    0%{
        opacity:0;
        width: 0px;
        height:0px;
    }
    5% {
        width: 300px;
        height: 60px;
    }
    100% {
        opacity:1;
    }
}

@keyframes fadeout {
    0% {
        opacity: 1;
        width: 300px;
        height: 60px;
    }
    99%{
        width: 300px;
        height: 60px;
    }
    100% {
        opacity:0;
    }
}

Comments

[yambejp]

「DOM操作無し」といいますが「classList.remove('hide')」をしない意図はなにかありますか？標準的なブラウザなら搭載している機能だと思いますが・・・。仮に「ページ表示時に一瞬modalが表示されてしまう」のが問題なら、最初からclassをスタティックに書き込んでおけばよいのでは？
<div class="modal hide">saved!</div>

[kazoogon]

回答ありがとうございます。
> 「DOM操作無し」といいますが「classList.remove('hide')」をしない意図はなにかありますか？
こちら実はriotのタグ内にあるコードで、できるならDOM操作せずにという意図です

> <div class="modal hide">saved!</div>
これだと今一緒の挙動(page表示時にmodalが表示されてfade outする)になると思いますが、何か私が勘違いしてますかね？？

[dice142]

がっつり問題の箇所にriot.jsの記述使ってるので
「(今回の質問はRiot.jsを触ったこと無い方でも分かるかと思います)」
の記述は混乱を招きます。

[kazoogon]

了解です。
変更しておきました

Answer 1

・最初からwidth, heightに高さを与えておく
・animationからtransitionに変更
・表示されていない場合にclickできないようにpointer-events: none;で対応

と致しました

Answer 2

なるほど.hideがアニメーションなんですね、であれば

<div class="modal hide" style="display:none">saved!</div>

として、hideの終わるタイミングをまってdisplay:noneを削除するとかでしょうか

window.addEventListener('DOMContentLoaded', function(e){
  setTimeout(function(){
    document.querySelector('.modal').style.display="";
  },2000);
});

Comments

[kazoogon]

回答ありがとうございます。
http://var.blog.jp/archives/32989241.html(ここの"フェードアウト"項目)にもあるんですが、fade out animationの実装をしようとするとdisplayやvisibilityではできず、opacityのheight・widthを変更しないとできないとのことなんですが、displayでもいけるんですかね？？

ちなみにdisplayでもやってみましたが、fade outのanimationは起動しませんでした汗 (というかそうやってできずにいろいろ模索していたら、opacityじゃないとダメと分かりました)

[kazoogon]

失礼しました、yambejpさんの回答は最初にhideのanimationが出てしまうのを防ぐために設置しておくためだけのdisplay: none; だと今分かりました。
勘違いして申し訳ございませんでした

[kazoogon]

度々申し訳ございません。
この方法を試してみましたが、mount関数でdisplay: ''; にした後でfade out のanimationが起動してしまいますね。。
(こちら本文に追加いたしました)

Answer 3

DOMマウント時にhideでアニメーションが入っているのが原因ですかね。

ちょっと回りくどい気がしますが、DOMをマウントできたかどうかフラグを立てておき、
そのフラグもhideクラスを設定する考慮にいれればご希望の動作はできそうです。