From 2d8b04663a147fdc943f31be6cd21bd53d08ccf3 Mon Sep 17 00:00:00 2001
From: Juanfran <juanfran.alcantara@kaleidos.net>
Date: Wed, 6 Aug 2014 08:31:50 +0200
Subject: [PATCH] lightbox transition

---
 app/coffee/modules/common/lightboxes.coffee | 11 +++++++++--
 app/coffee/modules/nav.coffee               |  2 +-
 app/styles/modules/common/lightbox.scss     |  5 ++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/app/coffee/modules/common/lightboxes.coffee b/app/coffee/modules/common/lightboxes.coffee
index 14f447db..32ad5366 100644
--- a/app/coffee/modules/common/lightboxes.coffee
+++ b/app/coffee/modules/common/lightboxes.coffee
@@ -25,10 +25,17 @@ bindOnce = @.taiga.bindOnce
 
 class LightboxService extends taiga.Service
     open: (lightbox) ->
-        lightbox.addClass('open')
+        lightbox.css('display', 'flex')
+
+        setTimeout ( ->
+            lightbox.addClass('open')
+        ), 70
 
     close: (lightbox) ->
-        lightbox.removeClass('open')
+        lightbox
+            .one "transitionend", () ->
+                lightbox.css('display', 'none')
+            .removeClass('open')
 
 module.service("lightboxService", LightboxService)
 
diff --git a/app/coffee/modules/nav.coffee b/app/coffee/modules/nav.coffee
index 7e64bb38..a820ac61 100644
--- a/app/coffee/modules/nav.coffee
+++ b/app/coffee/modules/nav.coffee
@@ -55,7 +55,7 @@ ProjectsNavigationDirective = ($rootscope) ->
                 timeout = 500 - timeout
 
             setTimeout ( ->
-                overlay.one 'webkitTransitionEnd transitionend transitionEnd', () ->
+                overlay.one 'transitionend', () ->
                     overlay.hide()
 
                 $(document.body)
diff --git a/app/styles/modules/common/lightbox.scss b/app/styles/modules/common/lightbox.scss
index d8858b6e..d08ce5ba 100644
--- a/app/styles/modules/common/lightbox.scss
+++ b/app/styles/modules/common/lightbox.scss
@@ -1,9 +1,11 @@
 .lightbox {
     @include background-opacity($white, .95);
     @include table-flex(center, center, flex, row, wrap, center);
+    @include transition (opacity .3s ease);
     bottom: 0;
     display: none;
     left: 0;
+    opacity: 0;
     position: fixed;
     right: 0;
     top: 0;
@@ -31,7 +33,8 @@
         text-align: center;
     }
     &.open {
-        display: flex;
+        @include transition (opacity .3s ease);
+        opacity: 1;
     }
 }