better ease

js/paint.js

@@ -75,20 +75,20 @@ function getId() {
     }
 }
 
-var curVer = 0, maxVer = -1, stopVer = 1000, stopped=false;
+var curVer = 0, maxVer = -1, stopVer = 1000, stopped = false;
 var maxResult = {};
 
 function getMap() {
     if (curVer != 0) document.getElementById('upload').classList.add('disabled')
     else document.getElementById('upload').classList.remove('disabled')
-    if (curVer >= stopVer){
-        if(!stopped)document.getElementById('lbtn').classList.add('disabled'),stopped=true;
+    if (curVer >= stopVer) {
+        if (!stopped) document.getElementById('lbtn').classList.add('disabled'), stopped = true;
         else {
-            curVer=stopVer;
+            curVer = stopVer;
             return;
         }
     }
-    else document.getElementById('lbtn').classList.remove('disabled'),stopped=false;
+    else document.getElementById('lbtn').classList.remove('disabled'), stopped = false;
     document.getElementById('version').innerHTML = "当前版本：" + (curVer == 0 ? '' : '-') + curVer + ' by ';
     console.log('GetMap: currentVersion: ' + curVer)
     if (maxVer >= curVer) {
@@ -233,7 +233,6 @@ $(document).ready(function () {
         }
     }
 
-
     for (let i = 0; i < box.length; i++) {
         box[i].style.backgroundColor = "#fff"
         box[i].className = 'pixel'
@@ -297,8 +296,6 @@ $(document).ready(function () {
         }
     }
 
-
-
     let colors = ['#FFF', '#000', '#7f7f7f', '#c3c3c3', '#880015', '#ed1c24', '#ff7f27', "#fff200", "#22b14c", "#00a2e8", "#3f48cc", "#a349a4"]
     for (let i = 0; i < colors.length; i++) {
         let colorItem = document.createElement("li")

paint/index.html

@@ -77,6 +77,7 @@
             flex-wrap: wrap;
             margin: auto;
             transition-duration: 0.3s;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
             transform-origin: 0px 0px;
             border: 1px solid rgb(211, 211, 211);
         }
@@ -109,6 +110,7 @@
             bottom: 20px;
             right: 20px;
             transition-duration: 0.3s;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
             background-color: rgba(15, 15, 15, 0.1);
             border: 5px solid rgba(15, 15, 15, 0.1);
             border-radius: 15px;
@@ -201,8 +203,9 @@
         </div>
     </div>
     <div id="controls">
-        <button class="btn btn-default noshadow" id="help" onclick="alert('说明：左键绘制，右键擦除。\n左右方向键可浏览历史版本，鼠标悬停于版本上可查看时间。\n点击上传后，同一设备一天内的编辑将会保存在一个版本中，并对所有人可见。')"><span class="glyphicon glyphicon-question-sign"
-                aria-hidden="true"></span></button>
+        <button class="btn btn-default noshadow" id="help"
+            onclick="alert('说明：左键绘制，右键擦除。\n左右方向键可浏览历史版本，鼠标悬停于版本上可查看时间。\n点击上传后，同一设备一天内的编辑将会保存在一个版本中，并对所有人可见。')"><span
+                class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></button>
         <button class="btn btn-default noshadow" id="zoom"><span class="glyphicon glyphicon-zoom-in"
                 aria-hidden="true"></span></button>
         <button class="btn btn-warning" id="show-hide-line">