过渡动画

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

@@ -1,11 +1,6 @@
 <template>
-
-  <div class="warn" v-if="showWarning"  :draggable="true"
-    @dragstart="onDragStart"
-    @dragend="onDragEnd"
-    @mousedown.prevent.stop="onMouseDown"
-    @mousemove="onMouseMove"
-    @mouseup="onMouseUp">
+  <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>
@@ -29,6 +24,7 @@
     </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>