animate.css demo优化动画效果 🐶

JaneSu · Jan 25, 2016 · f6e7105 · f6e7105
1 parent 4b65ded
commit f6e7105
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/demo/animate.html b/demo/animate.html
@@ -34,14 +34,14 @@
             change: function (e) {
                 // 移除动画属性
                 $('.js-animate').each(function() {
-                    $(this).removeClass($(this).data('animate'));
+                    $(this).removeClass($(this).data('animate')).hide();
                 });
             },
             afterChange: function (e) {
                 // 添加动画属性
                 $('.page').eq(e.cur).find('.js-animate')
                     .each(function () {
-                        $(this).addClass($(this).data('animate'));
+                        $(this).addClass($(this).data('animate')).show();
                     });
             }
         });

diff --git a/demo_js/animate.html b/demo_js/animate.html
@@ -8,6 +8,11 @@
     <link rel="stylesheet" href="css/global.css">
     <link rel="stylesheet" href="../src/zepto.fullpage.css">
     <link rel="stylesheet" href="css/animate.css">
+    <style>
+        .hide {
+            display: none;
+        }
+    </style>
 </head>
 <body>
     <div class="wp">
@@ -35,12 +40,14 @@
                 // 移除动画属性
                 forEach.call(document.querySelectorAll('.js-animate'), function (v) {
                     v.classList.remove(v.dataset['animate']);
+                    v.classList.add('hide');
                 });
             },
             afterChange: function (e) {
                 // 添加动画属性
                 forEach.call(document.querySelectorAll('.page')[e.cur].querySelectorAll('.js-animate'), function(v) {
                     v.classList.add(v.dataset['animate']);
+                    v.classList.remove('hide');
                 });
             }
         });