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>