vant components

packages/vant-css/src/popup.css

@@ -0,0 +1,78 @@
+@component-namespace van {
+  @b modal {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.701961);
+    transition: all .5s ease-out;
+  }
+
+  @b popup {
+    position: fixed;
+    background-color: #fff;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    backface-visibility: hidden;
+    transition: .2s ease-out;
+
+    @m top {
+      width: 100%;
+      top: 0;
+      right: auto;
+      bottom: auto;
+      left: 50%;
+      transform: translate3d(-50%, 0, 0);
+    }
+
+    @m right {
+      top: 50%;
+      right: 0;
+      bottom: auto;
+      left: auto;
+      transform: translate3d(0, -50%, 0);
+    }
+
+    @m bottom {
+      width: 100%;
+      top: auto;
+      bottom: 0;
+      right: auto;
+      left: 50%;
+      transform: translate3d(-50%, 0, 0);
+    }
+
+    @m left {
+      top: 50%;
+      right: auto;
+      bottom: auto;
+      left: 0;
+      transform: translate3d(0, -50%, 0);
+    }
+  }
+}
+
+.popup-slide-top-enter,
+.popup-slide-top-leave-active {
+  transform: translate3d(-50%, -100%, 0);
+}
+
+.popup-slide-right-enter,
+.popup-slide-right-leave-active {
+  transform: translate3d(100%, -50%, 0);
+}
+
+.popup-slide-bottom-enter,
+.popup-slide-bottom-leave-active {
+  transform: translate3d(-50%, 100%, 0);
+}
+
+.popup-slide-left-enter, .popup-slide-left-leave-active {
+  transform: translate3d(-100%, -50%, 0);
+}
+
+.popup-fade-enter, .popup-fade-leave-active {
+  opacity: 0;
+}