/* 折叠状态下隐藏动画容器,避免页面加载时闪现 */
.mw-collapsible.mw-collapsed .zoom-fullscreen {
visibility: hidden;
opacity: 0;
}
/* 折叠展开时显示图片 */
.mw-collapsible:not(.mw-collapsed) .zoom-fullscreen {
visibility: visible;
opacity: 1;
}
/* 图片动画及布局 */
.zoom-fullscreen {
position: fixed !important;
top: 50% !important;
left: 50% !important;
margin-top: -50vh !important; /* 负一半视口高度,粗略居中 */
margin-left: -50vw !important; /* 负一半视口宽度,粗略居中 */
width: auto !important;
height: auto !important;
max-width: 100vw !important;
max-height: 100vh !important;
object-fit: contain !important;
transform: scale(0.1);
animation: zoomThenHide 1.5s ease-out forwards;
z-index: 99999 !important;
display: block !important;
}
/* 动画关键帧 */
@keyframes zoomThenHide {
0% {
opacity: 0;
transform: scale(0.1);
}
20% {
opacity: 1;
transform: scale(3);
}
86.7% {
opacity: 1;
transform: scale(3);
}
100% {
opacity: 0;
transform: scale(0);
}
}