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>

src/directives/custom-show.js

@@ -0,0 +1,51 @@
+/**
+ * 自定义动画指令
+ * v-custom-show="show"
+*/
+const TimeMap = new Map()
+export default {
+	name: 'custom-show',
+	mounted(el, binding) {
+		const { value, modifiers } = binding
+		const config = getConfig(modifiers)
+		el.style.transition = `all ${config.time}ms ease-in-out`
+		el.style.display = value ? '' : 'none';
+		el.style.opacity = value ? 1 : 0;
+		el.classList.toggle('hide', !value);
+	},
+	updated(el, binding) {
+		const { value, modifiers } = binding
+		const config = getConfig(modifiers)
+		if (TimeMap.has(el)) {
+			clearTimeout(TimeMap.get(el))
+			TimeMap.delete(el)
+		}
+		if (value) {
+			el.style.display = ''
+			setTimeout(() => {
+				el.classList.remove('hide')
+				el.style.opacity = 1
+			})
+		} else {
+			el.classList.add('hide')
+			el.style.opacity = 0
+			setTimeout(() => el.style.display = 'none', config.time)
+		}
+	},
+	beforeUnmount(el, binding) {
+		if (TimeMap.has(el)) {
+			clearTimeout(TimeMap.get(el))
+			TimeMap.delete(el)
+		}
+	}
+};
+function getConfig(modifiers) {
+	const obj = {
+		time: 300,
+	}
+	Object.keys(modifiers).forEach(key => {
+		const arr = key.split('-')
+		if (arr.length === 2) obj[arr[0]] = arr[1]
+	})
+	return obj
+}