优化页面

pages/NewAddedPk/NewAddedPk.vue

@@ -1,5 +1,5 @@
-<template>
-  <view v-if="Display" class="Mask create-module" @click="open()">
+<template><view v-if="Display" :class="[Display ? 'create-module' : 'close-animation ', 'Mask']" @click="open()">
+  
     <view @click.stop class="containers">
       <view class="container">
         <image
@@ -276,21 +276,28 @@ export default {
 
 <style scoped>
 /* 定义动画 */
+/* 原始进入动画 */
 @keyframes slide-in {
-  from {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
+  from { transform: translateY(100%); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
 }
 
-/* 应用动画到组件 */
+/* 新增关闭动画 */
+@keyframes slide-out {
+  from { transform: translateY(0); opacity: 1; }
+  to { transform: translateY(-100%); opacity: 0; }
+}
+
+/* 进入动画类 */
 .create-module {
   animation: slide-in 0.3s ease-in-out;
 }
+
+/* 关闭动画类 */
+.close-animation {
+  animation: slide-out 0.3s ease-in-out forwards;
+}
+
 .Mask {
   width: 100vw;
   height: 100vh;