Hey there, let's break down this problem and get you a working pure CSS solution!

First, let's clear up the core reason your initial attempt failed: pointer-events is a discrete CSS property, meaning it can't be animated or transitioned. No amount of steps() functions or timing delays will make it smoothly change values—this is defined in the CSS spec, so that's why your original transition rule for pointer-events had no effect.

Luckily, we can use transition delays and state classes to mimic the behavior you want, without relying on JavaScript transition events. Here's how to implement it:

Step 1: Define State Classes & Base Styles #

We'll use a .popup--open class to trigger the popup's visible state, and leverage transition-delay to sync pointer-events changes with your opacity/visibility animation.

/* Base page styles - adjust selector to match your page container */
.page {
  /* Delay re-enabling page interaction until popup transition finishes */
  transition: pointer-events 0s 6s;
}

/* Disable page interaction while popup is opening/closing */
.popup--open + .page {
  pointer-events: none;
  transition-delay: 0s; /* Apply immediately when popup opens */
}

.popup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  
  /* Default hidden state */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  
  /* Transition visibility/opacity, and delay pointer-events changes */
  transition: 
    visibility 0s 6s, /* Hide visibility only after opacity fades out */
    opacity 6s ease-in-out,
    pointer-events 0s 6s; /* Disable pointer events after transition ends */
}

/* Active visible state */
.popup--open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  
  /* Override delays to trigger animation immediately, but wait to enable pointer events */
  transition-delay: 0s, 0s, 6s;
}

How This Works #

• When opening the popup: Adding .popup--open immediately disables page interaction, starts the opacity fade-in, and waits 6 seconds (your transition duration) before enabling pointer events on the popup itself.
• When closing the popup: Removing .popup--open starts the opacity fade-out, keeps the popup visible until the fade finishes, disables popup pointer events after 6 seconds, and re-enables page interaction at the same time.

Triggering the State #

You'll still need a tiny bit of JavaScript to add/remove the .popup--open class when users click your buttons/photos, but this is just simple state toggling—not listening to transition events. Example:

// Replace with your actual button/popup selectors
document.querySelector('.add-btn').addEventListener('click', () => {
  document.querySelector('.popup').classList.add('popup--open');
});

// Add similar handlers for edit buttons/photo clicks, and a close button

This keeps the core interaction logic in CSS, which should satisfy your code reviewer's feedback.

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