如何切换动画

Question

我想在单击按钮时切换元素（使用HTML onclick）。即，如果我点击一个按钮，则会显示loginmodal whill节目；然后，如果我单击关闭按钮，退出时它将切换动画。

我正在使用CSS动画库animate.css

我已经尝试过下面的代码，但是并没有给我想要的东西。

 <div id="loginmodal" class="modal">
        <span onclick="if ( document.getElementById('lmodal').classList.contains('fadeInLeftBig') ) { document.getElementById('lmodal').className =
   document.getElementById('lmodal').className.replace
      ( /(?:^|\s)fadeInLeftBig(?!\S)/g , '' ); document.getElementById('lmodal').className += ' fadeOutRightBig'; document.getElementById('loginmodal').style.display='none';}" class="close-search" title="Close">&times;</span>

        <!--The modal content-->

        <form action="<?php echo htmlspecialchars('/forms/login/'); ?>" class="modal-content animated fadeInLeftBig" method="post" id="lmodal">
            <div class="imgcontainer">
                <img src="/images/user.png" class="avatar">
                    </div>

                    <div class="logincontainer">
                        <label for="username"><strong>Username</strong>
                        </label>
                        <input type="text" placeholder="Enter Username" name="username">

                        <label for="password"><strong>Password</strong></label>
                        <input type="password" placeholder="Enter Password" name="password">

                        <button type="submit" class="cbtn">Login</button>
                        <label>
                        <input style="width:auto" type="checkbox" name="remember" checked>Remember me</label>
                </div>

                <div class="logincontainer" style="background: #f1f1f1">
                    <div class="cbtn cancelbtn" style="max-width: auto" onclick="document.getElementById('loginmodal').style.display='none'">Cancel</div>
                    <span class="forgotpass"><a href="./login/password/reset/">Forgot Password?</a></span>
                </div>
                </form>
            </div>

.modal {
    display: none;
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgb(0,0,0);
    background: rgba(0,0,0,0.9);
    padding-top: 60px;
}


.modal-content {
    background: #fefefe;
    margin: 5px auto;
    border: 1px solid #888;
    max-width: 40%;
}


.close {
    position: absolute;
    right: 31%;
    top: 60;
    color: black;
    font-size: 35px;
    font-weight: bold
}


.close:hover, .close:focus, .close-search:hover, .close-search:focus {
    color: red;
    cursor: pointer;
}