css - CSS Transitions交换功能

我正在使用CSS过渡制作滑出面板。我正在使用Javascript这样触发动画；

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

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

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

我需要知道的是，一旦我启动了第一个功能，如何交换该功能，以便用户可以关闭面板。

最佳答案

尝试这样的事情：

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>

关于css - CSS Transitions交换功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13496549/