如何阻止点击播放按钮后滑动门淡出及消失？

点击播放按钮后，页面中的红色滑动门（.panel-left和.panel-right）会执行滑出动画并消失，以下是两种可行的解决方法：

原因分析 #

点击播放按钮时，initCover函数内的coverClickHandler会给对应的.curtain元素添加slide类，而CSS中.curtain.slide .panel-left和.curtain.slide .panel-right的样式通过transform属性让滑动门滑出可视区域，导致视觉上消失。

方案一：移除添加slide类的代码 #

如果不需要slide类带来的其他效果（比如.curtain.slide::after的边框变化），直接删除添加该类的代码即可：

修改JavaScript中的openCurtain函数：

function openCurtain(cover) {
  //hide(cover);
  const curtain = document.querySelector(".curtain");
  // 移除添加slide类的代码
  return curtain;
}

这样点击播放按钮时，.curtain不会被添加slide类，滑动门也就不会触发滑出动画。

方案二：修改CSS保留slide类但阻止滑动门滑出 #

如果需要保留slide类的其他效果，仅阻止滑动门消失，可以修改CSS中对应样式：

原CSS代码：

.curtain.slide .panel-left {
  transform: translateX(calc(-100% - 1px));
}

.curtain.slide .panel-right {
  transform: translateX(calc(100% + 1px));
}

修改为：

.curtain.slide .panel-left {
  transform: none;
}

.curtain.slide .panel-right {
  transform: none;
}

或者直接注释/删除这两段样式，滑动门就会保持初始位置，不会消失。

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