Fixed notificacion delay

examples/test/app/events.notification.js

@@ -10,7 +10,7 @@ Lungo.Events.init({
 
     'tap section#notification a[data-action=loading]': function() {
         Lungo.Notification.loading();
-        setTimeout(Lungo.Notification.hide, 2000);
+        // setTimeout(Lungo.Notification.hide, 2000);
     },
 
     'tap section#notification a[data-action=success]': function() {
@@ -46,7 +46,17 @@ Lungo.Events.init({
 
     'tap section#notification a[data-action=html]': function() {
         Lungo.Notification.html('<h1>Hello World</h1>', true);
-    }
+    },
 
+    'tap section#notification a[data-action=chaining]': function() {
+        Lungo.Notification.show('Title', 'Description', 'message', false, 2, function() {
+            Lungo.Notification.error('Title 2', 'Description 2', 'message',  2, function() {
+                Lungo.Notification.show('Title 3', 'Description 3', 'message', false, 2, function() {
+                    Lungo.Notification.html('<h1>Hello World</h1>', true);
+                    // Lungo.Notification.hide();
+                });
+            });
+        });
+    }
 });
 

examples/test/app/resources/sections/notification.html

@@ -12,6 +12,8 @@
             <a href="#" class="button big green" data-label="Success" data-action="success"></a>
             <a href="#" class="button big red" data-label="Error" data-action="error"></a>
             <a href="#" class="button big yellow" data-label="Alert" data-action="alert"></a>
+
+            <a href="#" class="button big blue" data-label="Chaining" data-action="chaining"></a>
         </div>
     </article>
 </section>

src/Lungo.Notification.js

@@ -52,11 +52,10 @@ Lungo.Notification = (function(lng, undefined) {
      *
      */
     var hide = function() {
-        _window.removeClass(STYLE.SHOW);
-
+        _window.removeClass('show');
         setTimeout(function() {
             _el.style('display', 'none').removeClass('url').removeClass('confirm').removeClass('modal');
-        }, ANIMATION_MILISECONDS - 10);
+        }, ANIMATION_MILISECONDS - 50);
     };
 
     /**

src/stylesheets/css/lungo.widgets.notification.css

@@ -29,6 +29,16 @@
 }
 .notification .window.show {
   opacity: 1;
+  -webkit-transition-delay: 300ms;
+  -moz-transition-delay: 300ms;
+  -ms-transition-delay: 300ms;
+  -o-transition-delay: 300ms;
+  transition-delay: 300ms;
+  -webkit-transition-delay: 300ms;
+  -moz-transition-delay: 300ms;
+  -ms-transition-delay: 300ms;
+  -o-transition-delay: 300ms;
+  transition-delay: 300ms;
 }
 .notification .window:not(.special) {
   left: 50%;
@@ -50,28 +60,28 @@
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
-  -webkit-transform: scale(0.85);
-  -moz-transform: scale(0.85);
-  -ms-transform: scale(0.85);
-  -o-transform: scale(0.85);
-  transform: scale(0.85);
-  -webkit-transform: scale(0.85);
-  -moz-transform: scale(0.85);
-  -ms-transform: scale(0.85);
-  -o-transform: scale(0.85);
-  transform: scale(0.85);
+  -webkit-transform: translate3d(0, 10%, 0);
+  -moz-transform: translate3d(0, 10%, 0);
+  -ms-transform: translate3d(0, 10%, 0);
+  -o-transform: translate3d(0, 10%, 0);
+  transform: translate3d(0, 10%, 0);
+  -webkit-transform: translate3d(0, 10%, 0);
+  -moz-transform: translate3d(0, 10%, 0);
+  -ms-transform: translate3d(0, 10%, 0);
+  -o-transform: translate3d(0, 10%, 0);
+  transform: translate3d(0, 10%, 0);
 }
 .notification .window:not(.special).show {
-  -webkit-transform: translate3d(0, 0%, 0);
-  -moz-transform: translate3d(0, 0%, 0);
-  -ms-transform: translate3d(0, 0%, 0);
-  -o-transform: translate3d(0, 0%, 0);
-  transform: translate3d(0, 0%, 0);
-  -webkit-transform: translate3d(0, 0%, 0);
-  -moz-transform: translate3d(0, 0%, 0);
-  -ms-transform: translate3d(0, 0%, 0);
-  -o-transform: translate3d(0, 0%, 0);
-  transform: translate3d(0, 0%, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 .notification .window:not(.special) .icon {
   display: block;

src/stylesheets/lungo.widgets.notification.less

@@ -30,14 +30,11 @@
     & .window {
         position: relative;
         opacity: 0;
-
-        //transition-property: -webkit-transform, transform, opacity;
-        // @TODO: Correct vendor property;
         .transition(all @keyframe @defaultTrasition);
 
         &.show {
             opacity: 1;
-            // .transition(all @keyframe @defaultTrasition);
+            .transition-delay(@keyframe);
         }
 
         &:not(.special) {
@@ -50,18 +47,14 @@
             text-align: center;
 
             .border-radius(@modal_border_radius);
-            // .transform(translate3d(0, 100%, 0));
-            .transform(scale(0.85));
+            .transform(translate3d(0, 10%, 0));
 
-            &.show {
-                .transform(translate3d(0, 0%, 0));
-            }
+            &.show { .transform(translate3d(0, 0, 0)); }
 
             & .icon {
                 display: block;
                 font-size: 5.0em;
                 &.loading {
-                    // margin: 24px auto;
                     margin-top: 24px;
                     margin-bottom: 24px;
                 }