Use states and animations

WPDevHQ · Apr 26, 2015 · 70d3a2b · 70d3a2b
1 parent f6eace4
commit 70d3a2b
Show file tree

Hide file tree

Showing 4 changed files with 226 additions and 87 deletions.
diff --git a/.csscomb.json b/.csscomb.json
@@ -187,6 +187,11 @@
       "-ms-animation-direction",
       "-o-animation-direction",
       "animation-direction",
+      "-webkit-animation-fill-mode",
+      "-moz-animation-fill-mode",
+      "-ms-animation-fill-mode",
+      "-o-animation-fill-mode",
+      "animation-fill-mode",
       "text-align",
       "-webkit-text-align-last",
       "-moz-text-align-last",

diff --git a/examples/index.html b/examples/index.html
@@ -92,7 +92,7 @@ <h1>Remodal</h1>
     </p>
   </div>
   <br>
-  <button href="#" data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
+  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
   <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
 </div>
 
@@ -127,28 +127,28 @@ <h1>Another one window</h1>
 
 <!-- Events -->
 <script>
-  $(document).on('open', '.remodal', function () {
-    console.log('open');
+  $(document).on('opening', '.remodal', function () {
+    console.log('opening');
   });
 
   $(document).on('opened', '.remodal', function () {
     console.log('opened');
   });
 
-  $(document).on('close', '.remodal', function (e) {
-    console.log('close' + (e.reason ? ', reason: ' + e.reason : ''));
+  $(document).on('closing', '.remodal', function (e) {
+    console.log('closing' + (e.reason ? ', reason: ' + e.reason : ''));
   });
 
   $(document).on('closed', '.remodal', function (e) {
     console.log('closed' + (e.reason ? ', reason: ' + e.reason : ''));
   });
 
-  $(document).on('confirm', '.remodal', function () {
-    console.log('confirm');
+  $(document).on('confirmation', '.remodal', function () {
+    console.log('confirmation');
   });
 
-  $(document).on('cancel', '.remodal', function () {
-    console.log('cancel');
+  $(document).on('cancellation', '.remodal', function () {
+    console.log('cancellation');
   });
 
 //  You can open or close it like this:

diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css
@@ -70,7 +70,7 @@ html.remodal-is-locked {
   display: inline-block;
 }
 
-body.remodal-is-active .remodal {
+body.remodal-is-opening .remodal {
   /* Disable text resizing */
   text-size-adjust: 100%;
 }
@@ -82,14 +82,20 @@ body.remodal-is-active .remodal {
 /* Default theme styles of the overlay */
 
 .remodal-overlay {
-  transition: opacity 0.2s;
-
-  opacity: 0;
   background: rgba(43, 46, 56, 0.9);
 }
 
-body.remodal-is-active .remodal-overlay {
-  opacity: 1;
+body.remodal-is-opening .remodal-overlay,
+body.remodal-is-closing .remodal-overlay {
+  animation-fill-mode: forwards;
+}
+
+body.remodal-is-opening .remodal-overlay {
+  animation: remodal-overlay-open-keyframes 0.2s;
+}
+
+body.remodal-is-closing .remodal-overlay {
+  animation: remodal-overlay-close-keyframes 0.2s;
 }
 
 /* Default theme styles of the modal dialog */
@@ -100,18 +106,21 @@ body.remodal-is-active .remodal-overlay {
   min-height: 100%;
   padding: 35px;
 
-  transition: transform 0.2s, opacity 0.2s;
-  transform: scale(1.05);
-
-  opacity: 0;
   color: #182a3c;
   background: #fff;
 }
 
-body.remodal-is-active .remodal {
-  transform: scale(1);
+body.remodal-is-opening .remodal,
+body.remodal-is-closing .remodal {
+  animation-fill-mode: forwards;
+}
+
+body.remodal-is-opening .remodal {
+  animation: remodal-open-keyframes 0.2s;
+}
 
-  opacity: 1;
+body.remodal-is-closing .remodal {
+  animation: remodal-close-keyframes 0.2s;
 }
 
 /* Vertical align of the modal dialog */
@@ -217,6 +226,53 @@ body.remodal-is-active .remodal {
   border: 0;
 }
 
+/* Keyframes
+   ========================================================================== */
+
+@keyframes remodal-open-keyframes {
+  from {
+    transform: scale(1.05);
+
+    opacity: 0;
+  }
+  to {
+    transform: none;
+
+    opacity: 1;
+  }
+}
+
+@keyframes remodal-close-keyframes {
+  from {
+    transform: scale(1);
+
+    opacity: 1;
+  }
+  to {
+    transform: scale(0.95);
+
+    opacity: 0;
+  }
+}
+
+@keyframes remodal-overlay-open-keyframes {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes remodal-overlay-close-keyframes {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
 /* Media queries
    ========================================================================== */
 
@@ -229,11 +285,8 @@ body.remodal-is-active .remodal {
 
   /* Background for effects */
 
-  .remodal-bg {
-    transition: filter 0.2s;
-  }
-
-  body.remodal-is-active .remodal-bg {
+  body.remodal-is-opening .remodal-bg,
+  body.remodal-is-opened .remodal-bg {
     filter: blur(3px);
   }
 }