From 5aba679b90c286396b97172a7579d35e78cdcfeb Mon Sep 17 00:00:00 2001
From: wolegca <2738076308@qq.com>
Date: Sat, 21 Sep 2019 16:07:59 +0800
Subject: [PATCH] add animation
---
css/index.css | 2 +-
css/myui.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++++
index.html | 9 +++++++-
js/index.js | 4 ++++
js/initialize.js | 1 +
js/view.js | 4 +++-
view.html | 9 +++++++-
7 files changed, 84 insertions(+), 4 deletions(-)
diff --git a/css/index.css b/css/index.css
index 765ccfa..f6233fb 100644
--- a/css/index.css
+++ b/css/index.css
@@ -16,7 +16,7 @@ div.sidebar div:nth-of-type(n+1) span{
div.sidebar div:nth-of-type(n+1) a{
text-decoration: none;
- transition:all ease .2s;
+ transition:all ease .1s;
padding-left: 2px;
border-radius:5px;
box-shadow: 1px 1px 2px #999;
diff --git a/css/myui.css b/css/myui.css
index 6b59342..40678aa 100644
--- a/css/myui.css
+++ b/css/myui.css
@@ -8,6 +8,7 @@ body,
html {
margin: 0;
padding: 0;
+ height: 100%;
}
body {
@@ -365,6 +366,64 @@ body {
margin-bottom: 10px
}
+.loading{
+ display: block;
+ position:absolute;
+ top:50%;
+ left:50%;
+ transform:translate(-50%,-50%);
+ width:100px;
+ height:100px;
+ z-index:100;
+ animation:fadeIn .2s ease .5s forwards;
+ opacity: 0;
+}
+
+.loading span{
+ display: block;
+ position: absolute;
+ top:0px;
+ left: 45px;
+ height:10px;
+ width:10px;
+ background:white;
+ border-radius: 10px;
+ transform-origin: 5px 50px;
+ animation: load 2s cubic-bezier(.6,0,.4,1) infinite;
+
+}
+
+.loading span:nth-of-type(1){
+ animation-delay: .125s
+}
+.loading span:nth-of-type(2){
+ animation-delay: .250s
+}
+.loading span:nth-of-type(3){
+ animation-delay: .375s
+}
+.loading span:nth-of-type(4){
+ animation-delay: .5s
+}
+.loading span:nth-of-type(5){
+ animation-delay: .625s
+}
+.loading span:nth-of-type(6){
+ animation-delay: .750s
+}
+
+@keyframes load {
+ 0%{
+ transform:rotate(0deg)
+ }
+ 50% {
+ transform:rotate(360deg);
+ }
+ 100%{
+ transform:rotate(360deg);
+ }
+}
+
@keyframes fadeIn {
from {
opacity: 0
diff --git a/index.html b/index.html
index 9277997..939631e 100644
--- a/index.html
+++ b/index.html
@@ -43,7 +43,14 @@
-
+
+
+
+
+
+
+
+
diff --git a/js/index.js b/js/index.js
index 33d243d..a052c4d 100644
--- a/js/index.js
+++ b/js/index.js
@@ -18,6 +18,10 @@ $.ajax({
success: function (response) {
var lastIndex = response.length - 1;
+ if(response.length <= index){
+ return;
+ }
+
listContent(response, lastIndex);
if (response[lastIndex]['hasCode'])
diff --git a/js/initialize.js b/js/initialize.js
index 843a2b8..dce6468 100644
--- a/js/initialize.js
+++ b/js/initialize.js
@@ -127,6 +127,7 @@ function listContent(json, num) {
sidebar.append($('').append($('').append(' ยท ' + json[index]['title'])));
}
}
+ $('.loading').remove();
}
function getQueryString(param) {
diff --git a/js/view.js b/js/view.js
index 874e701..ceddf84 100644
--- a/js/view.js
+++ b/js/view.js
@@ -5,7 +5,9 @@
url: "content.json?timestamp=" + (new Date()).valueOf(),
dataType: "json",
success: function (response) {
-
+
+ if (response.length <= index)
+ return;
listContent(response, index);
if (response[index]['hasCode'])
diff --git a/view.html b/view.html
index fa1bfb3..309ae41 100644
--- a/view.html
+++ b/view.html
@@ -43,7 +43,14 @@
-
+
+
+
+
+
+
+
+