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

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

HTML

---

你能不能给这个类添加一个动画

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

---

是的，Javascript，希望您至少尝试自己编写代码。堆栈溢出不是代码编写服务。我建议你做一些额外的研究，要么通过谷歌，要么通过搜索，尝试一下。如果您仍然有问题，请返回您的代码，并解释您尝试了什么以及为什么它不起作用。您可以使用JavaScriptClick添加一个类。您是否正在使用jQuery/JS阻止提交？否则，页面将消失。

.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;
}

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

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