Browse Source

Use different transition style (transform/scale rather than margin-top)

sbkwgh 8 years ago
parent
commit
db19550c62
1 changed files with 5 additions and 2 deletions
  1. 5 2
      src/components/ModalWindow.vue

+ 5 - 2
src/components/ModalWindow.vue

@@ -46,17 +46,20 @@
 	.modal_window {
 		box-shadow: 0 14px 28px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.10);
 		background-color: #fff;
-		margin-top: -3rem;
+		//margin-top: -3rem;
 		opacity: 0;
 		position: relative;
 		border: 0.125rem solid $color__gray--darkest;
 		border-radius: 0.25rem;
 		pointer-events: none;
 
-		transition: margin-top 0.3s, opacity 0.3s;
+		transform: scale(1.1);
+
+		transition: margin-top 0.3s, opacity 0.3s, transform 0.3s;
 
 		@at-root #{&}--show {
 			margin-top: 0;
+			transform: scale(1);
 			opacity: 1;
 			pointer-events: all;