diff options
| author | BigCoke233 <hi@guhub.cn> | 2020-04-03 10:40:09 +0800 |
|---|---|---|
| committer | BigCoke233 <hi@guhub.cn> | 2020-04-03 10:40:09 +0800 |
| commit | 70963c72d91488db68d9fb92478772b32cec4dc4 (patch) | |
| tree | 017046f1e52126aea33f2a56d0280f49a367a057 | |
| parent | 27692329c05b15f89acc994f90830e517b2a3992 (diff) | |
:dizzy: Add: 评论发送时的加载动画
| -rw-r--r-- | assets/css/main/comment.css | 15 | ||||
| -rw-r--r-- | assets/js/cmt.miracles.js | 6 |
2 files changed, 19 insertions, 2 deletions
diff --git a/assets/css/main/comment.css b/assets/css/main/comment.css index e5fff71..a8a7c5b 100644 --- a/assets/css/main/comment.css +++ b/assets/css/main/comment.css @@ -189,7 +189,7 @@ .comment-textarea {
width: 100%;
border: none;
- max-width: 100%;
+ max-width: 100%
}
.comment-input input {
display: block;
@@ -289,4 +289,17 @@ animation: fadein;
animation-duration: 0.3s;
-webkit-animation: fadein 0.3s;
+}
+
+/* 发送评论时评论框样式 */
+.comment-form {
+ transition: opacity .2s;
+}
+.comment-sending {
+ opacity: 0.6;
+}
+.comment-sending textarea {
+ background: url('/usr/themes/Miracles/images/loading/bilibili.gif') no-repeat;
+ background-position: center center;
+ background-size: cover
}
\ No newline at end of file diff --git a/assets/js/cmt.miracles.js b/assets/js/cmt.miracles.js index 3b75289..1db4734 100644 --- a/assets/js/cmt.miracles.js +++ b/assets/js/cmt.miracles.js @@ -108,6 +108,8 @@ var MiraclesComment = { function beforeComment() {
//禁用按钮
$('#comment-form .comment-submit').attr('disabled', true);
+ $('.comment-form').addClass('comment-sending');
+ $('#comment-form .comment-submit').text('提交中...');
};
beforeComment();
@@ -115,11 +117,13 @@ var MiraclesComment = { function afterComment(status) {
//取消禁用评论按钮
$('#comment-form .comment-submit').removeAttr('disabled');
+ $('.comment-form').removeClass('comment-sending');
+ $('#comment-form .comment-submit').text('评论');
//判断是否评论成功
if(status) {
//如果成功
- if ($('.comment-waiting').length) {
+ if ($('.comment-waiting').length>0) {
alertSend('评论提交成功，正在等待审核！', 'success');
}else{
alertSend('评论提交成功！', 'success');
|