From 757e50ed48e37cadfde1533256f8b147d6d9facc Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sun, 18 May 2014 00:21:10 +0530 Subject: [PATCH] Add hint--no-animate class for no transitions. Fixes #65 --- demo.html | 11 +++++++---- src/hint-effects.scss | 13 ++++++++++++- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/demo.html b/demo.html index 3174e5f..1c5dd13 100644 --- a/demo.html +++ b/demo.html @@ -33,12 +33,12 @@ - +

HINT.css

A tooltip library in CSS

-

+

Look, there is something over me.

@@ -60,11 +60,11 @@

A tooltip library in CSS

Oh man! You are gonna self-destruct in 5 sec.

- +

You did something wrong!

- +

You can use different classes for different types of tooltips.

@@ -85,6 +85,9 @@

Extra

Effects

+

+ Dont like animation? +

Adding a hint--bounce class gives you that...

diff --git a/src/hint-effects.scss b/src/hint-effects.scss index 4b0cebf..992aa62 100644 --- 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);