如何修改JavaScript中画廊弹窗的动画函数？

修改步骤： #

1. HTML调整

给弹窗元素直接添加active类，让页面加载时直接显示：

<div class="popup active">
    <!-- 弹窗原有内容保持不变 -->
</div>

2. CSS修改

调整弹窗的过渡逻辑，仅在关闭时触发动画：

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  /* 初始状态直接铺满屏幕，无缩放 */
  transform: translate(-50%, -50%) scale(1);
  width: 100vw;
  height: 100vh;
  
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  overflow: hidden;
  /* 初始状态直接显示，不设置过渡 */
  opacity: 1;
}

/* 仅当弹窗失去active类时，应用过渡动画隐藏 */
.popup:not(.active) {
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: 1s;
}

/* 保留子元素的显示逻辑，去掉延迟让初始加载时直接显示 */
.popup.active .close-btn,
.popup.active .image-name,
.popup.active .index,
.popup.active .large-image,
.popup.active .arrow-btn {
  opacity: 1;
  transition: opacity .5s;
  transition-delay: 0s;
}

3. JavaScript调整

移除页面加载时触发弹窗显示的冗余代码：

// 删除以下代码块，因为HTML已直接添加active类
const setPopupImage = index => {
  popup.classList.toggle('active');
}
setPopupImage(0);

效果说明 #

• 页面加载时，弹窗及大图直接以100vw/100vh尺寸显示，无展开动画；
• 点击关闭按钮时，弹窗会以缩放动画平滑隐藏；
• 点击画廊图片时，弹窗会以缩放动画重新显示（若不需要此打开动画，可进一步移除.popup.active的过渡属性）。

内容的提问来源于stack exchange，提问作者Megan