Add hint--no-animate class for no transitions. Fixes #65

chinchang · May 17, 2014 · 757e50e · 757e50e
1 parent a7fd2ee
commit 757e50e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/demo.html b/demo.html
@@ -33,12 +33,12 @@
         <link rel="stylesheet" href="hint.css">
     </head>
     <body>
-       
+
     	<h1>HINT.css</h1>
 		<h3>A tooltip library in CSS</h3>
 
 
-		<p> 
+		<p>
 			<a href="#" class="hint--top" data-hint="Yeah, I am >:D">Look, there is something over me.</a>
 		</p>
 
@@ -60,11 +60,11 @@ <h3>A tooltip library in CSS</h3>
 		<p>
 			<a class="hint--top  hint--error" data-hint="This is an error tooltip">Oh man! You are gonna self-destruct in 5 sec.</a>
 		</p>
-		
+
 		<p>
 			<a class="hint--left  hint--warning" data-hint="This is a warning tooltip">You did something wrong!</a>
 		</p>
-		
+
 		<p>
 			<a class="hint--right  hint--info" data-hint="This is an info tooltip">You can use different classes for different types of tooltips.</a>
 		</p>
@@ -85,6 +85,9 @@ <h3>Extra</h3>
 
 	    <h3>Effects</h3>
 
+		<p>
+			<a class="hint--top  hint--no-animate" data-hint="Get a simple show/hide tooltip">Dont like animation?</a>
+		</p>
 	    <p>
 			<a class="hint--right  hint--bounce" data-hint="Bounce">Adding a <code>hint--bounce</code> class gives you that...</a>
 		</p>

diff --git a/src/hint-effects.scss b/src/hint-effects.scss
@@ -4,10 +4,21 @@
  * Defines various transition effects for the tooltips.
  *
  * Classes added:
- * 	1) hint--bounce
+ * 	1) hint--no-animate
+ * 	2) hint--bounce
  *
  */
 
+// Remove animation from tooltips.
+.#{$prefix}no-animate {
+	&:before, &:after {
+		-webkit-transition: none;
+		-moz-transition: none;
+		transition: none;
+	}
+}
+
+// Bounce effect in tooltips.
 .#{$prefix}bounce {
 	&:before, &:after {
 		-webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(.71,1.7,.77,1.24);