update

wechatui · Nov 6, 2015 · 8d0b371 · 8d0b371
1 parent eabf45a
commit 8d0b371
Show file tree

Hide file tree

Showing 27 changed files with 563 additions and 5,162 deletions.
diff --git a/README.md b/README.md
@@ -12,11 +12,27 @@
 
 ```html
 <div class="swiper">
-    <div class="item item1">
-        <h1 class="bear" toggle-class="slide_in">bear</h1>
+    <div class="item">
+        <h2 class="title fadeInUp animated">它无孔不入</h2>
     </div>
-    <div class="item item2">
-        <h1 class="hehe" toggle-class="slide_in">kiki</h1>
+    <div class="item">
+        <h2 class="title fadeInUp animated">你无处可藏</h2>
+    </div>
+
+    <div class="item">
+        <h2 class="title fadeInUp animated">不是它可恶</h2>
+    </div>
+
+    <div class="item">
+        <h2 class="title fadeInUp animated">而是它不懂你</h2>
+    </div>
+
+    <div class="item">
+        <h2 class="title fadeInUp animated">我们试图</h2>
+    </div>
+
+    <div class="item">
+        <h2 class="title fadeInUp animated">做些改变</h2>
     </div>
 </div>
 <script src="../swiper.js"></script>
@@ -62,6 +78,8 @@
 
 - `direction`：String，滑动方向，默认值`vertical`；横向滑动时为`horizontal`
 
+- `activeClass`: String，当前屏激活时添加的类名；默认值`active`
+
 - `threshold`：Number，滑动距离阀值，默认值`50`，当按住屏幕滑动超过此距离，松开手时，自动滑到下一屏，否则不滑动
 
 - `duration`：Number，滑屏动画时间，单位`ms`，默认值`300`；数值越小，滑动越快，越刺激
@@ -74,18 +92,21 @@
 - `swiped`：滑动**结束时**，触发`swiped`事件，回调函数传入两个参数，分别是上一屏和当前屏索引，从`0`算起。举例，从第一屏滑动到第二屏结束时：
 
 ```javascript
-    var swiper = new Siper();
+    var swiper = new Swiper();
     swiper.on('swiped', function(prev, current){
         console.log('上一屏：', prev); // 0
         console.log('当前屏：', current); // 1
     });
 ```
 
-##体验
+### 方法
 
-![](http://wechatui.github.io/swiper/images/example.jpg)
+- `next`: 主动滑动到下一屏。
 
-![](http://wechatui.github.io/swiper/images/example2.jpg)
+```
+    var swiper = new Swiper();
+    swiper.next();
+```
 
 ##License
 

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "iswiper",
   "description": "为移动端而生的滑动框架，无依赖，轻盈小巧，性能极致",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "author": "wechat ui team",
   "keywords": [
     "iswiper",

diff --git a/dist/example/0.jpg b/dist/example/0.jpg
diff --git a/dist/example/1.jpg b/dist/example/1.jpg
diff --git a/dist/example/2.jpg b/dist/example/2.jpg
diff --git a/dist/example/3.jpg b/dist/example/3.jpg
diff --git a/dist/example/example.css b/dist/example/example.css
@@ -7,7 +7,59 @@ body {
     height: 100%;
     overflow: hidden;
 }
-
 .container{
     height: 100%;
+    background-color: #efeff4;
+}
+.item{
+    color: #ffffff;
+    background-color: #000000;
+}
+.title{
+    margin-top: 50%;
+    text-align: center;
+}
+
+/**
+ * copy from animate.css
+ * https://daneden.github.io/animate.css
+ */
+
+.animated {
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+}
+@-webkit-keyframes fadeInUp {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+    }
+
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        transform: none;
+    }
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+    }
+
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        transform: none;
+    }
+}
+
+.fadeInUp {
+    -webkit-animation-name: fadeInUp;
+    animation-name: fadeInUp;
 }
diff --git a/dist/example/index.html b/dist/example/index.html
@@ -3,35 +3,40 @@
 <head lang="en">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
-    <title>swiper</title>
+    <title>无孔不入</title>
     <link rel="stylesheet" href="../swiper.css"/>
     <link rel="stylesheet" href="example.css"/>
 </head>
 <body>
 <div class="container">
     <div class="swiper">
-        <div class="item item1">
-            <h1 class="title">i am bear</h1>
+        <div class="item">
+            <h2 class="title fadeInUp animated">它无孔不入</h2>
+        </div>
+        <div class="item">
+            <h2 class="title fadeInUp animated">你无处可藏</h2>
+        </div>
 
-            <p class="signature">bear is x</p>
+        <div class="item">
+            <h2 class="title fadeInUp animated">不是它可恶</h2>
+        </div>
 
-            <p class="signature2">x is bear</p>
+        <div class="item">
+            <h2 class="title fadeInUp animated">而是它不懂你</h2>
         </div>
-        <div class="item item2">
-            <h1 class="title">i am jf</h1>
 
-            <p class="signature">hello</p>
+        <div class="item">
+            <h2 class="title fadeInUp animated">我们试图</h2>
+        </div>
 
-            <p class="signature2">word</p>
+        <div class="item">
+            <h2 class="title fadeInUp animated">做些改变</h2>
         </div>
     </div>
 </div>
 <script src="../swiper.js"></script>
 <script>
     var swiper = new Swiper();
-    swiper.on('swiped', function (prev, current){
-        console.log(prev, current);
-    });
 </script>
 </body>
 </html>
diff --git a/dist/example/index2.html b/dist/example/index2.html
diff --git a/dist/swiper.css b/dist/swiper.css
@@ -1,3 +1,9 @@
+/**
+ * swiper - swiper.js
+ * @version v1.4.0
+ * @link https://github.com/weui/swiper.git
+ * @license MIT
+ */
 .swiper {
   height: 100%;
   overflow: hidden;
@@ -12,3 +18,13 @@
   overflow: hidden;
   float: left;
 }
+.item.active .animated {
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  opacity: 1;
+}
+.item:not(.active) .animated {
+  -webkit-animation: none;
+          animation: none;
+  opacity: 0;
+}