animate popup

miniprogram/pages/main/journal-map/index.ts

@@ -3,6 +3,7 @@ import config from "../../../config/index";
 import Time from "../../../utils/Time";
 import { Journal, JournalPageType } from "../../../types/Journal";
 import { MediaAttachExt, MediaAttachType } from "../../../types/Attachment";
+import Toolkit from "../../../utils/Toolkit";
 
 interface MapMarker {
 	id: number;
@@ -40,6 +41,8 @@ interface JournalMapData {
 	journals: JournalMarker[];
 	customCalloutMarkerIds: number[];
 	selectedMarker: JournalMarker | null;
+	showDetail: boolean; // 是否显示详情（控制 DOM 存在）
+	detailVisible: boolean; // 详情是否可见（控制动画）
 	isLoading: boolean;
 }
 
@@ -52,6 +55,8 @@ Page({
 		journals: [],
 		customCalloutMarkerIds: [],
 		selectedMarker: null,
+		showDetail: false,
+		detailVisible: false,
 		isLoading: true,
 	},
 	async onLoad() {
@@ -225,16 +230,20 @@ Page({
 					mongoId: thumbItem.mongoId,
 				};
 			});
-			this.setData({
-				selectedMarker: {
-					id: journal.id,
-					date: Time.toPassedDateTime(journal.createdAt),
-					location: journal.location,
-					lat: journal.lat,
-					lng: journal.lng,
-					idea: journal.idea,
-					items: mediaItems
-				}
+			const selectedMarker = {
+				id: journal.id,
+				date: Time.toPassedDateTime(journal.createdAt),
+				location: journal.location,
+				lat: journal.lat,
+				lng: journal.lng,
+				idea: journal.idea,
+				items: mediaItems
+			};
+
+			// 先显示元素，再触发动画
+			this.setData({ selectedMarker, showDetail: true });
+			wx.nextTick(() => {
+				this.setData({ detailVisible: true });
 			});
 			wx.hideLoading();
 		} catch (err: any) {
@@ -246,8 +255,10 @@ Page({
 		}
 	},
 	/** 关闭详情 */
-	closeDetail() {
-		this.setData({ selectedMarker: null });
+	async closeDetail() {
+		this.setData({ detailVisible: false });
+		await Toolkit.sleep(350);
+		this.setData({ showDetail: false, selectedMarker: null });
 	},
 	/** 预览媒体 */
 	previewMedia(e: WechatMiniprogram.BaseEvent) {