引入动效库

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@antv/x6": "^1.24.4",
     "@arcgis/core": "^4.19.3",
+    "animate.css": "3.5",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "echarts": "^5.1.1",

src/main.js

@@ -20,6 +20,8 @@ import axios from "@api/axios";
 // 引入基础工具
 import basicTool from "@tools/basicTool";
 
+import animated from 'animate.css';
+
 /**
  * 对 Date 的扩展，将 Date 转化为指定格式的字符串
  * @param {String} fmt 传入一个字符串，根据所传字符串的格式返回转换后特定格式的日期，调用姿势：new Date().formatDate("yyyy-MM-dd hh:mm:ss");
@@ -44,6 +46,7 @@ window.__STATICVUE__ = createApp(App);
 window.__STATICVUE__.use(ElementPlus, { locale });
 window.__STATICVUE__.use(store);
 window.__STATICVUE__.use(router);
+window.__STATICVUE__.use(animated);
 
 window.__STATICVUE__.config.globalProperties.API = axios; //全局注册
 window.__STATICVUE__.config.globalProperties.BASE = basicTool; //全局注册

src/views/SandTable/SandTable.vue

@@ -89,9 +89,10 @@
       <Ppanel title="MTTR" class="stb-p"></Ppanel>
       <Ppanel title="MTTF" class="stb-p"></Ppanel>
     </div>
+    <!-- bounceInUp, -->
     <el-dialog
       top="50px"
-      custom-class="modal"
+      custom-class="modal animated bounceIn"
       v-model="showVideoDialog"
       width="80%"
       :destroy-on-close="true"
@@ -455,6 +456,14 @@ export default {
       color: #fff;
     }
   }
+
+  .animated {
+    // animation-duration: 0.5s;
+  }
+
+  .el-overlay {
+    overflow: hidden;
+  }
 }
 
 .exchange {
@@ -466,4 +475,29 @@ export default {
   overflow: hidden;
   cursor: pointer;
 }
+
+.modal {
+  animation-duration: 0;
+  @keyframes dialog-fade-in {
+    0% {
+      transform: translate3d(0, 100%, 0);
+      opacity: 1;
+    }
+    100% {
+      transform: translate3d(0, 100%, 0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes dialog-fade-out {
+    0% {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+    100% {
+      transform: translate3d(0, -100%, 0);
+      opacity: 0;
+    }
+  }
+}
 </style>