javascript - 单击提交按钮时类的 CSS 动画

Question

我正在尝试向此网页添加动画，使登录矩形在页面上滑动。所以从 564px 到 100%。我已经能够使用纯 CSS 动画来完成它，但是，我不希望它在按下表单中的提交按钮之前播放。有没有办法做到这一点？我的代码如下。

HTML

    <div class="innerRect">
    <br />
    <br />
    <img src="img/logo.png" />
    <br />
    <br />
    <br />
    <form id="logForm" action="" method="post">
        <p style="text-align:left; margin-left:80px;">USERNAME<br>
        <input type="text" name="username" style="width: 400px;">
    <br />
    <br />
        PASSWORD<br>
        <input type="password" name="password" style="width: 400px;">
    <br />
    <br />
        <input type="submit" value="LOG ON" style="float:right; margin-right: 85px;">
    </form>
    </p>

    <div class="settingsHelp">
    <a><img src="img/settings.png" /></a><br>
    <a><img src="img/help.png" /></a>
    </div>

    </div>

CSS

.loginRectangle {
    float: right;
    width:564px;
    height:100%;
    background-image:url(../img/rectangle.png);
    text-align: center;
    font-size: 28px;
}

.innerRect {
    float: right;
    width: 564px;
    height:100%;
}

.settingsHelp {
    position: absolute;
    bottom: 10px;
    right:10px;
    text-align:right;
}

Answer 1

你能不能只给类添加一个动画？

<input type="submit" id="submitButton" />

j查询

$(function() {
    $("#submitButton").on('click', function(){
         $("#sliderBox").addclass('slide');
    })
}