あま砂糖 | トースト

トースト用アニメーション

トースト出現

class="toast"とclass="nonde"つけ外しで切り替えることでアニメーションします。

以下Vue3系でのサンプルコード

トースト本体

<div :class="{'toast': is_toasted, 'none': !is_toasted}">
    <div class="container red w-150">
        トースト内容
    </div> 
</div>

トースト切り替え用関数（@clickに接続）

const click_bakeToast = ()=>{
    if (!is_toasted.value){
        is_toasted.value=true;
        setTimeout(()=>{
            is_toasted.value= false;
        },3500)
    }
}

this is toast
class="toast"