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>