aaa

src/components/main-menu-dialog.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="main-menu-dialog" @click="close" :class="{ show: show }">
+	<div class="main-menu-dialog" @click="close" v-custom-show="show">
 		<div class="close" @click="close"><span class="iconfont icon-close"></span></div>
 		<div class="content" @click.stop>
 			<div class="menu-item" v-for="item in menuList" :key="item.name">
@@ -104,10 +104,7 @@
 		overflow: hidden;
 		display: flex;
 		justify-content: flex-end;
-		animation: main-hide 0.2s linear both;
-		&.show {
-			animation: main-show 0.2s linear both;
-		}
+
 		> .close {
 			width: 37px;
 			height: 37px;
@@ -120,7 +117,13 @@
 			margin: 10px;
 			color: #222;
 		}
+		&.hide {
+			> .content {
+				margin-right: -100px;
+			}
+		}
 		> .content {
+			transition: margin-right 0.3s;
 			max-width: 300px;
 			flex: 1;
 			height: 100%;
@@ -186,25 +189,5 @@
 				}
 			}
 		}
-		@keyframes main-show {
-			0% {
-				opacity: 0;
-				display: none;
-			}
-
-			100% {
-				opacity: 1;
-			}
-		}
-		@keyframes main-hide {
-			0% {
-				opacity: 1;
-			}
-
-			100% {
-				opacity: 0;
-				display: none;
-			}
-		}
 	}
 </style>