Fix the modal example transition in Firefox (vuejs#2163)

Author: skirtles-code

src/examples/src/modal/Modal/style.css

@@ -6,18 +6,13 @@
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
-  display: table;
+  display: flex;
   transition: opacity 0.3s ease;
 }
 
-.modal-wrapper {
-  display: table-cell;
-  vertical-align: middle;
-}
-
 .modal-container {
   width: 300px;
-  margin: 0px auto;
+  margin: auto;
   padding: 20px 30px;
   background-color: #fff;
   border-radius: 2px;

src/examples/src/modal/Modal/template.html

@@ -1,24 +1,22 @@
 <Transition name="modal">
   <div v-if="show" class="modal-mask">
-    <div class="modal-wrapper">
-      <div class="modal-container">
-        <div class="modal-header">
-          <slot name="header">default header</slot>
-        </div>
+    <div class="modal-container">
+      <div class="modal-header">
+        <slot name="header">default header</slot>
+      </div>
 
-        <div class="modal-body">
-          <slot name="body">default body</slot>
-        </div>
+      <div class="modal-body">
+        <slot name="body">default body</slot>
+      </div>
 
-        <div class="modal-footer">
-          <slot name="footer">
-            default footer
-            <button
-              class="modal-default-button"
-              @click="$emit('close')"
-            >OK</button>
-          </slot>
-        </div>
+      <div class="modal-footer">
+        <slot name="footer">
+          default footer
+          <button
+            class="modal-default-button"
+            @click="$emit('close')"
+          >OK</button>
+        </slot>
       </div>
     </div>
   </div>