From 33ad94f2b72cd5c98989850371c341a341add115 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?0o=E5=BC=A0=E4=B8=8D=E6=AD=AAo0?= <zhangzheng7856@126.com>
Date: Sun, 26 Jun 2022 01:07:05 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(component):=20=E4=BF=AE=E5=A4=8Dla?=
 =?UTF-8?q?yer=20title=E9=97=AA=E7=83=81=E6=8A=96=E5=8A=A8=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98,=E5=BE=85=E5=95=86=E6=A6=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package/layer/src/component/Photos.vue | 10 +++++++++-
 package/layer/src/theme/index.css      |  4 +++-
 package/layer/src/utils/index.ts       | 18 ------------------
 3 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/package/layer/src/component/Photos.vue b/package/layer/src/component/Photos.vue
index 244c02fe..f53ac534 100644
--- a/package/layer/src/component/Photos.vue
+++ b/package/layer/src/component/Photos.vue
@@ -18,6 +18,7 @@
         class="layui-layer-imgbar"
         style="display: block"
         v-if="imgList.length > 1 || imgList[index].alt"
+        :style="{opacity:showLayerImgBar?1:0}"
       >
         <span class="layui-layer-imgtit">
           <span v-if="imgList[index].alt">{{ imgList[index].alt }}</span>
@@ -35,7 +36,7 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import { watch, ref } from "vue";
+import { watch, ref, onMounted, nextTick } from "vue";
 
 export interface LayPhotoProps {
   imgList: { src: string; alt: string }[];
@@ -62,4 +63,11 @@ const changeIndex = (step: number) => {
   }
   index.value = next;
 };
+
+const showLayerImgBar=ref(false)
+onMounted(()=>{
+  nextTick(()=>{
+    showLayerImgBar.value=true
+  })
+})
 </script>
diff --git a/package/layer/src/theme/index.css b/package/layer/src/theme/index.css
index 64e1fe72..cf9223cb 100644
--- a/package/layer/src/theme/index.css
+++ b/package/layer/src/theme/index.css
@@ -1148,7 +1148,9 @@ html #layuicss-layer {
     background-color: rgba(2, 0, 0, .35);
     color: #fff;
     overflow: hidden;
-    font-size: 0
+    font-size: 0;
+    opacity: 0;
+    transition: all 1s ease-in-out;
 }
 
 .layui-layer-imgtit * {
diff --git a/package/layer/src/utils/index.ts b/package/layer/src/utils/index.ts
index bff95be6..9fc48526 100644
--- a/package/layer/src/utils/index.ts
+++ b/package/layer/src/utils/index.ts
@@ -238,27 +238,9 @@ export function getDrawerAnimationClass(offset: any, isClose: boolean = false) {
   return isClose ? `${prefix}-${suffix}-close` : `${prefix}-${suffix}`;
 }
 
-//图片预加载
-export function loadImage(url: string, callback: Function, error: any) {
-  let img = new Image();
-  img.src = url;
-  if (img.complete) {
-    return callback(img);
-  }
-  img.onload = function () {
-    img.onload = null;
-    callback(img);
-  };
-  img.onerror = function (e) {
-    img.onerror = null;
-    error(e);
-  };
-}
-
 export async function calculatePhotosArea(url: string, options: object) {
   let img = new Image();
   img.src = url;
-
   return new Promise((resolve, reject) => {
     if (img.complete) {
       resolve(area(img));