From b1ea0582e84e92e26c1e5df8acf97ad5d864d395 Mon Sep 17 00:00:00 2001
From: Artem Sapegin <artem@sapegin.ru>
Date: Mon, 23 Sep 2013 22:26:58 +0400
Subject: [PATCH] CSS fade.

---
 src/social-likes.js        | 13 ++++---------
 src/styles/base.styl       |  9 ++++++++-
 src/styles/flat/index.styl |  1 -
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/social-likes.js b/src/social-likes.js
index f9bcafe..8d8013a 100644
--- a/src/social-likes.js
+++ b/src/social-likes.js
@@ -21,7 +21,7 @@
 }(function ($) { 'use strict';
 
 var prefix = 'social-likes__',
-	fadeSpeed = 'fast';
+	visibleClass = 'social-likes-is-visible';
 
 
 /**
@@ -234,8 +234,6 @@ SocialLikes.prototype = {
 		var defaultLeft = parseInt(container.css('left'), 10),
 			defaultTop = parseInt(container.css('top'), 10);
 
-		container.hide();
-
 		var button = $('<div>', {
 			'class': getElementClassNames('button', 'single'),
 			'text': container.data('single-title') || 'Share'
@@ -259,7 +257,7 @@ SocialLikes.prototype = {
 			return false;
 		});
 		close.click(function() {
-			container.fadeOut(fadeSpeed);
+			container.removeClass(visibleClass);
 		});
 
 		this.wrapper = wrapper;
@@ -472,7 +470,7 @@ function getElementClassNames(elem, mod) {
 function closeOnClick(elem) {
 	function handler(e) {
 		if ((e.type === 'keydown' && e.which !== 27) || $(e.target).closest(elem).length) return;
-		elem.fadeOut(fadeSpeed);
+		elem.removeClass(visibleClass);
 		doc.off(events, handler);
 	}
 	var doc = $(document),
@@ -484,7 +482,6 @@ function showInViewport(elem, offset) {
 	if (document.documentElement.getBoundingClientRect) {
 		var left = parseInt(elem.css('left'), 10),
 			top = parseInt(elem.css('top'), 10);
-		elem.css('visibility', 'hidden').show();
 
 		var rect = elem[0].getBoundingClientRect();
 		if (rect.left < offset)
@@ -496,10 +493,8 @@ function showInViewport(elem, offset) {
 			elem.css('top', offset - rect.top + top);
 		else if (rect.bottom > window.innerHeight - offset)
 			elem.css('top', window.innerHeight - rect.bottom - offset + top);
-
-		elem.hide().css('visibility', 'visible');
 	}
-	elem.fadeIn(fadeSpeed);
+	elem.addClass(visibleClass);
 }
 
 
diff --git a/src/styles/base.styl b/src/styles/base.styl
index acc8395..d1f1612 100644
--- a/src/styles/base.styl
+++ b/src/styles/base.styl
@@ -95,9 +95,16 @@
 	}
 	&_single {
 		position:absolute;
-		display:none;
 		text-align:left;
 		z-index:99999;
+		visibility:hidden;
+		opacity:0;
+		transition:visibility 0s .3s, opacity .3s ease-out;
+		&.social-likes-is-visible {
+			visibility:visible;
+			opacity:1;
+			transition:opacity .3s ease-out;
+		}
 	}
 }
 
diff --git a/src/styles/flat/index.styl b/src/styles/flat/index.styl
index 745f04d..66b18c9 100644
--- a/src/styles/flat/index.styl
+++ b/src/styles/flat/index.styl
@@ -33,7 +33,6 @@
 		color:#fff;
 		-webkit-font-smoothing:antialiased;
 		-moz-osx-font-smoothing:grayscale;
-		// transition:border .1s ease-in-out, color .2s ease-in-out;
 	}
 
 	&__icon {