`display: none` 在 css animation 中不起作用？

Question

I wrote a little code to have cards fade out and then be set to display: none; once clicked so it's not shown in the DOM after it has faded out. Although animation-fill-mode: forwards; works, but only the change on the display element seems to have no effect; if you hover over the area the cursor is still there, and the element is still shown in dev tools. Is there a way to make sure that the display: none; property is set properly?

CodePen Here

HTML <div></div>

CSS

body {
 background: black;
  margin-top: 4rem;
}

div {
  display: block;
  background: red;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.hidden {
  animation: hiddenTransition 300ms ease-in;
  animation-fill-mode: forwards; // DOESN'T WORK :C
  will-change: opacity, transform, display;
  cursor: pointer;
}

@keyframes hiddenTransition {
  0% {
    opacity: 1;
    transform: none;
    display: block;
  }
  99% {
    opacity: 0;
    transform: translateY(20%);
    display: block;
  }

  100% {
    opacity: 0;
    transform: translateY(20%);
    display: none;
  }  
}

JS

  var square = document.querySelector("div");

  square.addEventListener("click", function(){
    this.classList.toggle("hidden");
  });

Answer 1

Even if you set display: none , the element still will be present in devtools. Regarding the cursor, just change cursor display to default in the hidden class. Like so: cursor: default;

Answer 2

working code pen here

Note:-display property can't be animated

body {
  background: black;
  margin-top: 4rem;
}

div {
  display: block;
  background: red;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.hidden {
  animation: hiddenTransition 300ms ease-in;
  animation-fill-mode: forwards; // DOESN'T WORK :C
  will-change: opacity, transform, display;
  cursor: pointer;
}


@keyframes hiddenTransition {
  0% {

    transform: none;
    visibility:visible;
  }
  99% {

    transform: translateY(20%);

    visibility:visible;
  }

  100% {

    transform: translateY(20%);
    visibility:hidden;
  }  
}

Answer 3

Seems like the only way to achieve this is with JS, which is what vitilok posted in this comment:

Well, this is a bit tricky. So in order to accomplish what you want do the following: 1. remove display from will-change as well as from all frames. 2. add a new class .visuallyhidden { display: none; } 3. add: " setTimeout(function() { square.classList.add("visuallyhidden") }, 500) " inside the callback of click. You can see working example here And read this link if you want explanation

Basically, he put a setTimeout statement which changed the display property to none after the animation time.

Their CSS

.visuallyhidden {
  display: none;
}

Their JS

setTimeout(function() {
  square.classList.add("visuallyhidden")
}, 500);

Answer 4

As others said the display css property not work in css animation, so I have to set the property by js code.

img.classList.add('content-img') // css animation class name
img.onanimationend = () => {
  img.style.display='none' // hide the element after animation
};