css - CSSトランジションスワップ機能

Question

CSSトランジションを使用してスライドアウトパネルを作成しています。私はJavascriptを使用して、そのようなアニメーションを起動しています。

function slidein()
    {
    document.getElementById('container').className = 'slidein';
    }

    function slideout()
    {
    document.getElementById('container').className = 'slideout';
    }

<div onclick="slideout()">Click</div> 

私が知る必要があるのは、最初の関数を起動したら、ユーザーがパネルを閉じることができるように関数を交換する方法です。

Answer 1

次のようなものを試してください。

var slideState = 'slidein';

function slide() {
    if ( slideState == 'slidein' ) slideout();
    else slidein();
}

function slidein() {
    document.getElementById('container').className = 'slidein';
    slideState = 'slidein';
}

function slideout() {
    document.getElementById('container').className = 'slideout';
    slideState = 'slideout';
}

<div onclick="slide()">Click</div>