- Move $.fn.anim to fx.js

- Refactored $.fn.anim to accept an object of values. - Adding an optional ease parameter. Accepts keywords or custom cubic-bezier functions.
madrobby · Oct 8, 2010 · 3711b74 · 3711b74
1 parent 3a63d5f
commit 3711b74
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 4 deletions.
diff --git a/Rakefile b/Rakefile
@@ -6,6 +6,7 @@ ZEPTO_DIST_DIR = File.join(ZEPTO_ROOT, 'dist')
 
 ZEPTO_FILES    = [
   File.join(ZEPTO_SRC_DIR,'zepto.js'),
+  File.join(ZEPTO_SRC_DIR,'fx.js'),
   File.join(ZEPTO_SRC_DIR,'touch.js'),
   File.join(ZEPTO_SRC_DIR,'ajax.js')
 ]

diff --git a/src/fx.js b/src/fx.js
@@ -0,0 +1,8 @@
+(function($){
+  $.fn.anim = function(props, dur, ease){
+    var transforms = [], opacity, k;
+    for (k in props) k === 'opacity' ? opacity=props[k] : transforms.push(k+'('+props[k]+')');
+    return this.css({ '-webkit-transition': 'all '+(dur||0.5)+'s '+(ease||''),
+      '-webkit-transform': transforms.join(' '), opacity: opacity });
+  }
+})(Zepto);
diff --git a/src/zepto.js b/src/zepto.js
@@ -67,10 +67,6 @@ var Zepto = (function() {
     index: function(el){
       return this.dom[IO]($(el).get(0));
     },
-    anim: function(transform, opacity, dur){
-      return this.css({'-webkit-transition':'all '+(dur||0.5)+'s',
-        '-webkit-transform':transform,'opacity':(opacity===0?0:opacity||1)});
-    },
     bind: function(event, callback){
       return this(function(el){
         event.split(/\s/).forEach(function(event){ el[AEL](event, callback, false); });

diff --git a/test/fx.html b/test/fx.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <title>Zepto FX unit tests</title>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+  <script src="../src/zepto.js"></script>
+  <script src="../src/fx.js"></script>
+  <script src="evidence.js"></script>
+</head>
+<body>
+  <h1>Zepto FX unit tests</h1>
+  <p>
+    See the browser console for results.
+  </p>
+
+  <div id="animtest" style="width:40px;height:40px;background:red"></div>
+
+  <script>
+    Evidence.TestCase.extend('ZeptoFXTest', {
+
+      testAnim: function(t){
+        var el = $('#animtest').get(0);
+
+        $('#animtest').anim({
+          translate3d: '100px, 100px, 100px',
+          rotateZ: '90deg',
+          opacity: 0.5
+        }, 2, 'ease-out');
+        t.assertEqual('translate3d(100px, 100px, 100px) rotateZ(90deg)', el.style.webkitTransform);
+        t.assertEqual('ease-out', el.style.webkitTransitionTimingFunction);
+        t.assertEqual('0.5', el.style.opacity);
+      }
+
+    });
+  </script>
+</body>
+</html>
diff --git a/test/zepto.html b/test/zepto.html
@@ -19,6 +19,8 @@ <h1>Zepto DOM unit tests</h1>
     <span class="nay" id="nay">nay</span>
   </p>
 
+  <div id="animtest" style="position:relative;width:40px;height:40px;background:red;"></div>
+
   <div id="attr_1" data-id="someId1" data-name="someName1"></div>
   <div id="attr_2" data-id="someId2" data-name="someName2"></div>
 
@@ -247,6 +249,19 @@ <h1>Zepto DOM unit tests</h1>
         t.assertEqual('2px', $('#some_element').css('padding-left'));
       },
 
+      testAnim: function(t){
+        var el = $('#animtest').get(0);
+
+        $('#animtest').anim({
+            translate3d : '100px, 100px, 100px',
+            rotateZ : '90deg',
+            opacity : 0.5
+        }, 2, 'ease-out');
+        t.assertEqual('translate3d(100px, 100px, 100px) rotateZ(90deg)', el.style.webkitTransform);
+        t.assertEqual('ease-out', el.style.webkitTransitionTimingFunction);
+        t.assertEqual('0.5', el.style.opacity);
+      },
+
       testHtml: function(t){
         var div = $('div.htmltest');
         div.html('yowza');