🎨 docs

liuyonghua-cww · Jun 19, 2018 · 4341d94 · 4341d94
1 parent 77cc37c
commit 4341d94
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -50,7 +50,23 @@ new Flip({
   node: $('.flip'),
   from: 9527,
   to: 42,
-  duration: 2000
+  duration: 2
+})
+```
+
+### more complex usage
+```
+new Flip({
+  node: $('.flip'),
+  from: 73,
+  to: 25,
+  duration: 2,
+  delay: 1,
+  easeFn: function(pos) {
+    if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
+    return 0.5 * (Math.pow((pos-2),3) + 2);
+  },
+  systemArr: ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
 })
 ```
 

diff --git a/example/index.html b/example/index.html
@@ -8,6 +8,6 @@
   <title>demo</title>
 </head>
 <body>
-  <div class="app"></div>
+  <div class="flip"></div>
 </body>
 </html>
diff --git a/example/index.js b/example/index.js
@@ -1,15 +1,10 @@
 import './main.css'
 import Flip from '../flip'
 
-const el = new Flip({
-  node: document.querySelector('.app'),
-  from: 1000,
-  duration: .5
-})
+const $ = s => document.querySelector(s)
 
-let num = 1001
-setInterval(() => {
-  // const num = ~~(Math.random() * 9999)
-  num += 3
-  el.flipTo({to: num})
-}, 1000)
+new Flip({
+  node: $('.flip'),
+  from: 9527,
+  to: 42
+})
diff --git a/example/main.css b/example/main.css
@@ -20,14 +20,4 @@ html {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-}
-
-.number-flip {
-  position: relative;
-  overflow: hidden;
-}
-
-.ctnr {
-  position: relative;
-  display: inline-block;
 }
diff --git a/flip.js b/flip.js
@@ -32,17 +32,22 @@ module.exports = class flip {
     this.to = to || 0
     this.node = node
     this._initHTML(maxLenNum(this.from, this.to))
+    if (!to) return
     if (delay) setTimeout(() => {this.flipTo({to: this.to})}, delay * 1000)
     else this.flipTo({to: this.to})
   }
 
   _initHTML(digits) {
     this.node.classList.add('number-flip')
+    this.node.style.position = 'relative'
+    this.node.style.overflow = 'hidden'
     ;[...Array(digits).keys()].forEach(i => {
       const ctnr = g(`ctnr ctnr${i}`)(
         ...this.systemArr.map(i => g('digit')(i)),
         g('digit')(this.systemArr[0])
       )
+      ctnr.style.position = 'relative'
+      ctnr.style.display = 'inline-block'
       this.ctnrArr.unshift(ctnr)
       this.node.appendChild(ctnr)
       this.beforeArr.push(0)