diff --git a/src/views/oneMap/components/dynamicInformation.vue b/src/views/oneMap/components/dynamicInformation.vue
index f4a1295..1267e89 100644
--- a/src/views/oneMap/components/dynamicInformation.vue
+++ b/src/views/oneMap/components/dynamicInformation.vue
@@ -22,73 +22,68 @@
       </div>
     </div>
     <!-- 右侧 -->
-    <div
-      class="rightInfo"
-      :class="[
-        'animate__animated',
-        showInfo ? 'animate__fadeInLeft' : 'animate__fadeOutLeft',
-      ]"
-    >
-      <!-- 表头 -->
-      <el-row class="TopTableHeader">
-        <el-col
-          :span="tableHeader.span[i]"
-          v-for="(item, i) in tableHeader.titleList"
-          :key="i"
-        >
-          <div class="headerSpan">{{ item }}</div>
-        </el-col>
-      </el-row>
-      <!-- 表格内容 -->
-      <Vue3SeamlessScroll
-        :list="tableBodyData"
-        :singleHeight="34"
-        :hover="true"
-        class="TopTableBody"
-      >
-        <el-row class="TopTableBody_list" v-for="(item, k) in tableBodyData" :key="k">
-          <template v-for="(info, j) in tableHeader.codeList" :key="info">
-            <!-- 中心动态 特殊展示 operate -->
-            <el-col :span="tableHeader.span[j]" v-if="info == 'operate'">
-              <div class="bodySpan">
-                <el-button class="bodyBtn" link>发布</el-button>
-                <el-button class="bodyBtn" link>解除</el-button>
-                <el-button class="bodyBtn" link>下载</el-button>
-              </div>
-            </el-col>
-            <!-- 现场动态 特殊展示-->
-            <el-col :span="tableHeader.span[j]" v-if="info == 'duban'">
-              <div class="bodySpan">
-                <img
-                  class="TopTableListSpanImg2"
-                  src="@/assets/images/Sponge_screen/RQ/RQ_XX.png"
-                  alt=""
-                  @click="PaiFa(item)"
-                />
-                <img
-                  class="TopTableListSpanImg"
-                  src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
-                  alt=""
-                  @click="XianChangLianXian(item)"
-                />
-              </div>
-            </el-col>
-            <el-col :span="tableHeader.span[j]" v-if="info == 'zt'">
-              <div class="bodySpan">
-                {{ item[info] == 0 ? "未处理" : "已处理" }}
-              </div>
-            </el-col>
-            <!-- 通用展示 -->
-            <el-col :span="tableHeader.span[j]" v-else>
-              <el-tooltip effect="dark" :content="item[info]" placement="top">
-                <div class="bodySpan">{{ item[info] }}</div>
-              </el-tooltip>
-            </el-col>
-          </template>
+    <Transition name="slide-fade">
+      <div class="rightInfo" v-show="showInfo">
+        <!-- 表头 -->
+        <el-row class="TopTableHeader">
+          <el-col
+            :span="tableHeader.span[i]"
+            v-for="(item, i) in tableHeader.titleList"
+            :key="i"
+          >
+            <div class="headerSpan">{{ item }}</div>
+          </el-col>
         </el-row>
-      </Vue3SeamlessScroll>
-    </div>
-
+        <!-- 表格内容 -->
+        <Vue3SeamlessScroll
+          :list="tableBodyData"
+          :singleHeight="34"
+          :hover="true"
+          class="TopTableBody"
+        >
+          <el-row class="TopTableBody_list" v-for="(item, k) in tableBodyData" :key="k">
+            <template v-for="(info, j) in tableHeader.codeList" :key="info">
+              <!-- 中心动态 特殊展示 operate -->
+              <el-col :span="tableHeader.span[j]" v-if="info == 'operate'">
+                <div class="bodySpan">
+                  <el-button class="bodyBtn" link>发布</el-button>
+                  <el-button class="bodyBtn" link>解除</el-button>
+                  <el-button class="bodyBtn" link>下载</el-button>
+                </div>
+              </el-col>
+              <!-- 现场动态 特殊展示-->
+              <el-col :span="tableHeader.span[j]" v-if="info == 'duban'">
+                <div class="bodySpan">
+                  <img
+                    class="TopTableListSpanImg2"
+                    src="@/assets/images/Sponge_screen/RQ/RQ_XX.png"
+                    alt=""
+                    @click="PaiFa(item)"
+                  />
+                  <img
+                    class="TopTableListSpanImg"
+                    src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
+                    alt=""
+                    @click="XianChangLianXian(item)"
+                  />
+                </div>
+              </el-col>
+              <el-col :span="tableHeader.span[j]" v-if="info == 'zt'">
+                <div class="bodySpan">
+                  {{ item[info] == 0 ? "未处理" : "已处理" }}
+                </div>
+              </el-col>
+              <!-- 通用展示 -->
+              <el-col :span="tableHeader.span[j]" v-else>
+                <el-tooltip effect="dark" :content="item[info]" placement="top">
+                  <div class="bodySpan">{{ item[info] }}</div>
+                </el-tooltip>
+              </el-col>
+            </template>
+          </el-row>
+        </Vue3SeamlessScroll>
+      </div>
+    </Transition>
     <img class="infoIcon" alt="" :src="showInfo ? inIcon : ''" @click="shrinkInfo" />
   </div>
 </template>
@@ -293,7 +288,7 @@
 <style lang="scss" scoped>
 .dynamicInformation {
   position: absolute;
-  bottom: 170px;
+  bottom: 100px;
   height: 136px;
   box-sizing: border-box;
   display: flex;
@@ -358,7 +353,7 @@
   }
 
   .rightInfo {
-    width: calc(100% - 130px);
+    width: calc(100% - 135px);
     height: 136px;
     overflow: hidden;
     background: linear-gradient(
@@ -445,4 +440,20 @@
     cursor: pointer;
   }
 }
+/*
+    进入和离开动画可以使用不同
+    持续时间和速度曲线。
+  */
+.slide-fade-enter-active {
+  transition: all 0.1s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.1s ease-in;
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  opacity: 0;
+}
 </style>