feat: list-type: picture-card动画效果关闭样式

apps/web-antd/src/components/upload/src/image-upload.vue

@@ -27,6 +27,12 @@ interface ImageUploadProps extends BaseUploadProps {
    * @default picture-card
    */
   listType?: UploadListType;
+  /**
+   * 使用list-type: picture-card时 是否显示动画
+   * 会有一个`弹跳`的效果 默认关闭
+   * @default false
+   */
+  withAnimation?: boolean;
 }
 
 const props = withDefaults(defineProps<ImageUploadProps>(), {
@@ -43,6 +49,7 @@ const props = withDefaults(defineProps<ImageUploadProps>(), {
   helpMessage: true,
   enableDragUpload: false,
   abortOnUnmounted: true,
+  withAnimation: false,
 });
 
 const emit = defineEmits<UploadEmits>();
@@ -78,6 +85,7 @@ function currentPreview(file: UploadFile) {
   <div>
     <Upload
       v-model:file-list="innerFileList"
+      :class="{ 'upload-animation__disabled': !withAnimation }"
       :list-type="listType"
       :accept="accept"
       :disabled="disabled"
@@ -172,4 +180,11 @@ function currentPreview(file: UploadFile) {
     color: rgb(242 242 242 / 25%);
   }
 }
+
+// list-type: picture-card动画效果关闭样式
+.upload-animation__disabled {
+  .ant-upload-animate-inline {
+    animation-duration: 0s !important;
+  }
+}
 </style>

apps/web-antd/src/views/演示使用自行删除/upload/index.vue

@@ -51,6 +51,8 @@ const customThumbnailUrl: CustomGetter<undefined> = () => {
 };
 
 const { copy } = useClipboard({ legacy: true });
+
+const animationEnable = ref(false);
 </script>
 
 <template>
@@ -207,6 +209,19 @@ const { copy } = useClipboard({ legacy: true });
           :custom-thumb-url="customThumbnailUrl"
         />
       </Card>
+
+      <Card title="图片上传的动画效果" size="small">
+        <div class="my-2">
+          是否启用
+          <span class="font-semibold">list-type: picture-card</span> 的动画效果:
+          <Switch v-model:checked="animationEnable" />
+        </div>
+        <ImageUpload
+          v-model:value="singleImageId"
+          :with-animation="animationEnable"
+        />
+        当前绑定值: {{ singleImageId }}
+      </Card>
     </div>
   </Page>
 </template>