Modals with test and slide in up animation

dist/ionic.css

@@ -1430,6 +1430,26 @@ address {
   -moz-transition: -moz-transform 200ms ease;
   transition: transform 200ms ease; }
 
+/**
+ * Modals are independent windows that slide in from off-screen.
+ */
+.modal {
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  width: 100%;
+  min-height: 100%;
+  overflow: hidden;
+  background-color: white;
+  opacity: 0;
+  -webkit-transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0); }
+  .modal.active {
+    opacity: 1;
+    height: 100%;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0); }
+
 .list {
   margin-bottom: 20px;
   padding-left: 0;
@@ -2110,8 +2130,23 @@ a.button {
 .alert-info h4 {
   color: #3a87ad; }
 
+/*
 .slide-in-up.enter {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
-  -webkit-transition: -webkit-transform 0.25s ease-in-out, opacity 1ms 0.25s;
+
-  transition: transform 0.25s ease-in-out, opacity 1ms 0.25s; }
+  -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;
+  transition: transform .25s ease-in-out, opacity 1ms .25s;
+}
+*/
+.slide-in-up {
+  -webkit-transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0);
+  -webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
+  transition: transform 0.25s, opacity 1ms 0.25s;
+  -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); }
+
+.slide-in-up.active {
+  -webkit-transition: -webkit-transform 0.25s;
+  transition: transform 0.25s;
+  -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); }

scss/_variables.scss

@@ -344,6 +344,11 @@ $menu-inset-border-color:   #bbb;
 $menu-width:               270px;
 $menu-animation-speed:     200ms;
 
+// Modals
+// -------------------------------
+
+$modal-bg-color:              #fff !default;
+
 
 // Badges
 // -------------------------
@@ -408,3 +413,7 @@ $container-desktop:           ((940px + $grid-gutter-width)) !default;
 // Large screen / wide desktop
 $container-lg-desktop:        ((1140px + $grid-gutter-width)) !default;
 
+
+// Z-Indexes
+
+$zindex-modal: 10;

scss/ionic.scss

@@ -18,6 +18,7 @@
   "ionic/bar",
   "ionic/tabs",
   "ionic/menu",
+  "ionic/modal",
   "ionic/listview",
 
   // Forms

scss/ionic/_animations.scss

@@ -1,3 +1,6 @@
+$bezier-function: cubic-bezier(.1, .5, .1, 1);
+
+/*
 .slide-in-up.enter {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
@@ -5,3 +8,20 @@
   -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;
   transition: transform .25s ease-in-out, opacity 1ms .25s;
 }
+*/
+
+.slide-in-up {
+  -webkit-transform: translate3d(0, 100%, 0);
+          transform: translate3d(0, 100%, 0);
+
+  -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
+          transition:         transform .25s, opacity 1ms .25s;
+
+  -webkit-transition-timing-function: $bezier-function;
+}
+
+.slide-in-up.active {
+  -webkit-transition: -webkit-transform .25s;
+          transition:         transform .25s;
+  -webkit-transition-timing-function: $bezier-function;
+}

scss/ionic/_modal.scss

@@ -0,0 +1,35 @@
+/**
+ * Modals are independent windows that slide in from off-screen.
+ */
+
+.modal {
+  position: fixed; 
+
+  z-index: $zindex-modal;
+
+  top: 0;
+
+  width: 100%;
+  min-height: 100%;
+
+  overflow: hidden;
+
+  background-color: $modal-bg-color;
+
+  // Start it hidden
+  opacity: 0;
+
+  // Start it down low
+  -webkit-transform: translate3d(0, 100%, 0);
+          transform: translate3d(0, 100%, 0);
+
+  // Active modal
+  &.active {
+    opacity: 1;
+    height: 100%;
+    // Put it up
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}
+

test/modals.html

@@ -17,11 +17,38 @@
       </header>
 
       <main class="content padded has-header">
-        todo
+        <a href="#" class="button button-warning" id="modal-opener">Open Modal</a>
         <p><a class="button button-secondary" href="index.html">Homepage</a></p>
       </main>
 
     </section>
 
+    <div id="modal" class="modal slide-in-up">
+      <header class="bar bar-header bar-success">
+        <h1 class="title">BOOM</h1>
+        <a href="#" class="button" id="modal-closer">Close</a>
+      </header>
+
+      <main class="content padded has-header">
+        <h2>I'm a thing</h2>
+        <div style="background-color: red; width: 100%; height: 1000px"></div>
+      </main>
+    </div>
+
+    <script>
+      var open = document.getElementById('modal-opener');
+      open.addEventListener('click', function(e) {
+        var modal = document.getElementById('modal');
+        modal.classList.add('active');
+        return false;
+      });
+
+      var closer = document.getElementById('modal-closer');
+      closer.addEventListener('click', function(e) {
+        var modal = document.getElementById('modal');
+        modal.classList.remove('active');
+        return false;
+      });
+    </script>
   </body>
 </html>