fix: 旋转后的元素执行动画异常

src/views/components/element/ImageElement/BaseImageElement.vue

@@ -8,6 +8,10 @@
       height: elementInfo.height + 'px',
       transform: `rotate(${elementInfo.rotate}deg)`,
     }"
+  >
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
       <div 
         class="element-content"
@@ -34,6 +38,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -85,7 +90,10 @@ export default defineComponent({
 .base-element-image {
   position: absolute;
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;

src/views/components/element/ImageElement/index.vue

@@ -7,9 +7,12 @@
       left: elementInfo.left + 'px',
       width: elementInfo.width + 'px',
       height: elementInfo.height + 'px',
-      transform: `rotate(${elementInfo.rotate}deg)`,
     }"
     @mousedown="$event => handleSelectElement($event)" 
+  >
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
       <ImageClipHandler
         v-if="isCliping"
@@ -50,6 +53,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -149,7 +153,10 @@ export default defineComponent({
     cursor: default;
   }
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;

src/views/components/element/ShapeElement/BaseShapeElement.vue

@@ -6,8 +6,11 @@
       left: elementInfo.left + 'px',
       width: elementInfo.width + 'px',
       height: elementInfo.height + 'px',
-      transform: `rotate(${elementInfo.rotate}deg)`,
     }"
+  >
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
       <div 
         class="element-content"
@@ -49,6 +52,7 @@
         </SvgWrapper>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -96,7 +100,10 @@ export default defineComponent({
 .base-element-shape {
   position: absolute;
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;

src/views/components/element/ShapeElement/index.vue

@@ -7,9 +7,12 @@
       left: elementInfo.left + 'px',
       width: elementInfo.width + 'px',
       height: elementInfo.height + 'px',
-      transform: `rotate(${elementInfo.rotate}deg)`,
     }"
     @mousedown="$event => handleSelectElement($event)"
+  >
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
       <div 
         class="element-content" 
@@ -52,6 +55,7 @@
         </SvgWrapper>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -120,7 +124,10 @@ export default defineComponent({
     cursor: default;
   }
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;

src/views/components/element/TextElement/BaseTextElement.vue

@@ -5,8 +5,11 @@
       top: elementInfo.top + 'px',
       left: elementInfo.left + 'px',
       width: elementInfo.width + 'px',
-      transform: `rotate(${elementInfo.rotate}deg)`,
     }"
+  >
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
       <div 
         class="element-content"
@@ -26,6 +29,7 @@
         <div class="text ProseMirror-static" v-html="elementInfo.content"></div>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -61,7 +65,10 @@ export default defineComponent({
 .base-element-text {
   position: absolute;
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   position: relative;
   padding: 10px;

src/views/components/element/TextElement/index.vue

@@ -7,9 +7,12 @@
       top: elementInfo.top + 'px',
       left: elementInfo.left + 'px',
       width: elementInfo.width + 'px',
-      transform: `rotate(${elementInfo.rotate}deg)`,
     }"
     @mousedown="$event => handleSelectElement($event)"
+  >
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
       <div 
         class="element-content"
@@ -34,6 +37,7 @@
         ></div>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -325,7 +329,10 @@ export default defineComponent({
     cursor: default;
   }
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   position: relative;
   padding: 10px;