Question

我写了一些代码，让卡片淡出，然后在点击后设置为display: none;，这样在它消失后它就不会显示在DOM中。虽然animation-fill-mode: forwards;有效，但只有display元素的更改似乎没有效果;如果将鼠标悬停在该区域上，则光标仍然存在，并且该元素仍显示在开发工具中。有没有办法确保display: none;属性设置正确？

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

即使您设置display: none，该元素仍将存在于devtools中。关于光标，只需将光标显示更改为隐藏类中的默认值。像这样：cursor: default;

Answer 2

工作代码笔here

注意：-display属性无法设置动画

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

似乎实现这一目标的唯一方法是使用JS，这是vitilok在此评论中发布的内容：

嗯，这有点棘手。因此，为了完成您想要的操作，请执行以下操作：1。从将更改以及从所有帧中删除显示。 2.添加一个新类.visuallyhidden {display：none; 3.添加：“setTimeout（function（）{square.classList.add（”visualhidden“）}，500）”在click的回调中。您可以查看工作示例here如果您需要解释，请阅读this link

基本上，他在动画时间之后添加了setTimeout语句，将display属性更改为none。

他们的CSS

.visuallyhidden {
  display: none;
}

他们的JS

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

`display：none`没有在css动画中工作？

3 个答案: