more fluent animation

README.md

@@ -29,13 +29,11 @@ $ npm install aplayer
 ### HTML
 
 ```HTML
-<link rel="stylesheet" href="APlayer.css">
+<link rel="stylesheet" href="APlayer.min.css">
 <!-- ... -->
-<div id="player1" class="aplayer">
-    <div style="padding: 10px; font-size: 10px; text-align: center;">(＞﹏＜) APlayer 加载中,好累的说...</div>
-</div>
+<div id="player1" class="aplayer"></div>
 <!-- ... -->
-<script src="APlayer.js"></script>
+<script src="APlayer.min.js"></script>
 ```
 
 ### JS
@@ -86,10 +84,9 @@ Using [LRC format](https://en.wikipedia.org/wiki/LRC_(file_format))
 HTML:
 
 ```HTML
-<link rel="stylesheet" href="APlayer.css">
+<link rel="stylesheet" href="APlayer.min.css">
 <!-- ... -->
 <div id="player1" class="aplayer">
-    <div style="padding: 10px; font-size: 10px; text-align: center;">(＞﹏＜) APlayer 加载中,好累的说...</div>
     <pre class="aplayer-lrc-content">
         [ti:平凡之路]
         [ar:朴树]
@@ -107,7 +104,7 @@ HTML:
     </pre>
 </div>
 <!-- ... -->
-<script src="APlayer.js"></script>
+<script src="APlayer.min.js"></script>
 ```
 
 JS:

demo/index.html

@@ -53,7 +53,6 @@
         <hr>
         <h3>With lyrics</h3>
         <div id="player3" class="aplayer">
-            <div style="padding: 10px; font-size: 10px; text-align: center;">(＞﹏＜) APlayer 加载中,好累的说...</div>
             <pre class="aplayer-lrc-content">
                 [ti:平凡之路]
                 [ar:朴树]
@@ -123,13 +122,9 @@
             </pre>
         </div>
         <h3>Wide style</h3>
-        <div id="player1" class="aplayer">
-            <div style="padding: 10px; font-size: 10px; text-align: center;">(＞﹏＜) APlayer 加载中,好累的说...</div>
-        </div>
+        <div id="player1" class="aplayer"></div>
         <h3>Narrow style</h3>
-        <div id="player2" class="aplayer">
-            <div style="padding: 10px; font-size: 10px; text-align: center;">(＞﹏＜) APlayer 加载中,好累的说...</div>
-        </div>
+        <div id="player2" class="aplayer"></div>
     </div>
     <script src="../dist/APlayer.min.js"></script>
     <script>

src/APlayer.js

@@ -68,7 +68,7 @@ APlayer.prototype.init = function () {
         +         '<span class="aplayer-author"> - (＞﹏＜)加载中,好累的说...</span>'
         +     '</div>'
         +     '<div class="aplayer-lrc">'
-        +         '<div class="aplayer-lrc-contents" style="top: 0"></div>'
+        +         '<div class="aplayer-lrc-contents" style="transform: translateY(0);"></div>'
         +     '</div>'
         +     '<div class="aplayer-controller">'
         +         '<div class="aplayer-bar-wrap">'
@@ -299,7 +299,7 @@ APlayer.prototype.updateLrc = function (currentTime) {
         for (var i = 0; i < this.lrcTime.length; i++) {
             if (currentTime >= this.lrcTime[i] && (!this.lrcTime[i + 1] || currentTime < this.lrcTime[i + 1])) {
                 this.lrcIndex = i;
-                this.lrcContents.style.top = -this.lrcIndex * 20 + 'px';
+                this.lrcContents.style.transform = 'translateY(' + -this.lrcIndex * 20 + 'px)';
                 this.lrcContents.getElementsByClassName('aplayer-lrc-current')[0].classList.remove('aplayer-lrc-current');
                 this.lrcContents.getElementsByTagName('p')[i].classList.add('aplayer-lrc-current');
             }

src/APlayer.scss

@@ -348,7 +348,6 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
         }
 
         .aplayer-lrc-contents {
-            position: absolute;
             width: 100%;
             transition: all 0.5s ease-out;
         }