animate popup

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

@@ -90,11 +90,17 @@
 		z-index: 999;
 		display: flex;
 		position: fixed;
+		transition: transform 350ms cubic-bezier(.19, .1, .22, 1);
+		transform: translateY(100%);
 		background: var(--theme-bg-card);
 		box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, .15);
 		border-radius: 24rpx 24rpx 0 0;
 		flex-direction: column;
 
+		&.visible {
+			transform: translateY(0);
+		}
+
 		.detail-content {
 			flex: 1;
 			display: flex;

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) {

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

@@ -30,7 +30,7 @@
 	<cover-view wx:if="{{isLoading}}" class="loading">
 		<cover-view class="loading-text">加载中...</cover-view>
 	</cover-view>
-	<cover-view wx:if="{{selectedMarker}}" class="marker-detail">
+	<cover-view wx:if="{{showDetail}}" class="marker-detail {{detailVisible ? 'visible' : ''}}">
 		<cover-view class="detail-content">
 			<cover-view class="header">
 				<cover-view class="info">