过渡动画

mes-ui/mes-ui-admin-vue3/src/layout/components/warnmessage.vue

@@ -1,34 +1,30 @@
 <template>
-
-  <div class="warn" v-if="showWarning"  :draggable="true"
-    @dragstart="onDragStart"
-    @dragend="onDragEnd"
-    @mousedown.prevent.stop="onMouseDown"
-    @mousemove="onMouseMove"
-    @mouseup="onMouseUp">
-    <div class="warntitle">
-      <span> 设计预警通知</span>
-      <div>
-        <span @click="ExpandWran" class="warnclose"> <el-icon>
-            <Expand />
-          </el-icon></span>
-        <span @click="closeWran" class="warnclose"> <el-icon>
-            <CloseBold />
-          </el-icon></span>
+  <transition name="slide-right">
+    <div class="warn" v-if="showWarning" :draggable="true" @dragstart="onDragStart" @dragend="onDragEnd" @mousedown.prevent.stop="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp">
+      <div class="warntitle">
+        <span> 设计预警通知</span>
+        <div>
+          <span @click="ExpandWran" class="warnclose"> <el-icon>
+              <Expand />
+            </el-icon></span>
+          <span @click="closeWran" class="warnclose"> <el-icon>
+              <CloseBold />
+            </el-icon></span>
+        </div>
       </div>
-    </div>
 
-    <!-- 折叠 -->
-    <div class="warncenter">
-      <div class="warntext" v-for="item in 5" :key="item">
-        <span style="margin-top:5px"><img :src="warnimg" alt="" /></span>
-        <div class="warnnr">
-          <span>铸造工艺设计负责人: <span class="warnname">{{`薛小宝`}}</span> 请注意!</span>
-          <span class="warnbh">项目编号【{{ item}}】的图纸设计即将超时，请及时完成。</span>
-        </div>
+  <!-- 折叠 -->
+  <div class="warncenter">
+    <div class="warntext" v-for="item in 5" :key="item">
+      <span style="margin-top:5px"><img :src="warnimg" alt="" /></span>
+      <div class="warnnr">
+        <span>铸造工艺设计负责人: <span class="warnname">{{`薛小宝`}}</span> 请注意!</span>
+        <span class="warnbh">项目编号【{{ item}}】的图纸设计即将超时，请及时完成。</span>
       </div>
     </div>
   </div>
+  </div>
+  </transition>
 
   <div v-if="showFilled" @click="FoldWran" class="FoldWran">
     <span>
@@ -59,21 +55,21 @@ const ExpandWran = () => {
 }
 
 // 拖动
-let dragStartX = 0;
-let dragStartY = 0;
+let dragStartX = 0
+let dragStartY = 0
 
 const onMouseDown = (event: MouseEvent) => {
-  dragStartX = event.clientX - document.querySelector('.warn')!.offsetLeft;
-  dragStartY = event.clientY - document.querySelector('.warn')!.offsetTop;
-};
+  dragStartX = event.clientX - document.querySelector('.warn')!.offsetLeft
+  dragStartY = event.clientY - document.querySelector('.warn')!.offsetTop
+}
 
 const onMouseMove = (event: MouseEvent) => {
   if (event.buttons === 1) {
-    const target = document.querySelector('.warn')!;
-    target.style.left = `${event.clientX - dragStartX}px`;
-    target.style.top = `${event.clientY - dragStartY}px`;
+    const target = document.querySelector('.warn')!
+    target.style.left = `${event.clientX - dragStartX}px`
+    target.style.top = `${event.clientY - dragStartY}px`
   }
-};
+}
 
 // const onMouseUp = () => {
 //   // 可以在这里保存最终位置到store中（如果需要持久化）
@@ -95,7 +91,7 @@ const onMouseMove = (event: MouseEvent) => {
   position: absolute;
   top: 150px;
   right: 0;
-  width: 50px;
+  width: 40px;
   height: 40px;
   background-color: #e6a23c;
   color: #fff;
@@ -177,4 +173,21 @@ const onMouseMove = (event: MouseEvent) => {
   background-color: #888;
   border-radius: 6px;
 }
+
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.5s ;
+}
+
+.slide-right-enter-from,
+.slide-right-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.slide-right-enter-to,
+.slide-right-leave-from {
+  transform: translateX(0);
+}
 </style>