cache classes

bmcmahen · bmcmahen · commit 18ee2e8209d0 · 2013-05-03T12:05:39.000-06:00
diff --git a/Readme.md b/Readme.md
@@ -1,17 +1,18 @@
 
 # animate-css
 
-Apply css animations to an element, with a callback for when that animation finishes. If the browser doesn't support transitions, the callback is invoked immediately.
+A small helper for applying CSS animations to an element, with a callback for when that animation finishes. If the browser doesn't support transitions, the callback is invoked immediately. It works well with [animate.css](https://github.com/daneden/animate.css) animations.
 
 ## Installation
 
     $ component install bmcmahen/animate-css
 
 ## API
 
-    var animate = require('bmcmahen-animate');
+    var animate = require('bmcmahen-animate-css');
+    var el = document.getElementById('animate-me');
     animate(el, 'fadeOutRight', function(element){
-      $(element).remove();
+      // Element has finished animating
     });
 
 
diff --git a/component.json b/component.json
@@ -1,12 +1,14 @@
 {
-  "name": "animate",
-  "repo": "bmcmahen/animate",
+  "name": "animate-css",
+  "repo": "bmcmahen/animate-css",
   "description": "a jquery like api for animations, but for css",
   "version": "0.0.1",
   "keywords": [],
   "dependencies": {
     "component/classes": "*",
-    "ecarter/css-emitter": "*"
+    "ecarter/css-emitter": "*",
+    "bmcmahen/transition-property": "*",
+    "component/once": "*"
   },
   "development": {},
   "license": "MIT",
diff --git a/index.js b/index.js
@@ -18,10 +18,11 @@ function animate(el, className, fn){
     if (fn) fn(el);
     return;
   }
-  classes(el).add(className);
+  var cls = classes(el);
+  cls.add(className);
   cssEvent(el).bind(once(cleanup));
   function cleanup(){
-    classes(el).remove(className);
+    cls.remove(className);
     if (fn) fn(el);
   }
 }
diff --git a/tests/test.html b/tests/test.html
@@ -1,13 +1,67 @@
 <html>
 <head>
 	<title></title>
+	<style>
+		#hello {
+			width: 400px;
+			height: 400px;
+			background: #eee;
+		}
+
+		.animated {
+	-webkit-animation-duration: 1s;
+	   -moz-animation-duration: 1s;
+	     -o-animation-duration: 1s;
+	        animation-duration: 1s;
+	-webkit-animation-fill-mode: both;
+	   -moz-animation-fill-mode: both;
+	     -o-animation-fill-mode: both;
+	        animation-fill-mode: both;
+}
+
+		@-webkit-keyframes bounce {
+			0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
+			40% {-webkit-transform: translateY(-30px);}
+			60% {-webkit-transform: translateY(-15px);}
+		}
+
+		@-moz-keyframes bounce {
+			0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
+			40% {-moz-transform: translateY(-30px);}
+			60% {-moz-transform: translateY(-15px);}
+		}
+
+		@-o-keyframes bounce {
+			0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
+			40% {-o-transform: translateY(-30px);}
+			60% {-o-transform: translateY(-15px);}
+		}
+		@keyframes bounce {
+			0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+			40% {transform: translateY(-30px);}
+			60% {transform: translateY(-15px);}
+		}
+
+		.bounce {
+			-webkit-animation-name: bounce;
+			-moz-animation-name: bounce;
+			-o-animation-name: bounce;
+			animation-name: bounce;
+		}
+
+	</style>
 </head>
 <body>
 
+<div id='hello' class='animated'><p> hi there </p></div>
 <script src='../build/build.js' type='text/javascript'></script>
 <script>
-	var transitionEnd = require('animate');
-	console.log(transitionEnd);
+	var animate = require('animate-css');
+	var div = document.getElementById('hello');
+	animate(div, 'bounce', function(el){
+		console.log(el);
+	});
+
 </script>
 
 </body>

Original file line number	Diff line number	Diff line change
`@@ -18,10 +18,11 @@ function animate(el, className, fn){`
`18`	`18`	`if (fn) fn(el);`
`19`	`19`	`return;`
`20`	`20`	`}`
`21`		`- classes(el).add(className);`
	`21`	`+ var cls = classes(el);`
	`22`	`+ cls.add(className);`
`22`	`23`	`cssEvent(el).bind(once(cleanup));`
`23`	`24`	`function cleanup(){`
`24`		`- classes(el).remove(className);`
	`25`	`+ cls.remove(className);`
`25`	`26`	`if (fn) fn(el);`
`26`	`27`	`}`
`27`	`28`	`}`