`display: none` 在 CSS 动画中不起作用？答案

【问题标题】：`display: none` not working in css animation?`display: none` 在 CSS 动画中不起作用？
【发布时间】：2018-05-08 15:50:09
【问题描述】：

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

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;
  }  
}

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

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

【问题讨论】：

我认为你需要在动画完成后单独触发 display none 。查看this similar question 的答案，向您展示如何做到这一点。

标签： javascript html css animation css-animations

【解决方案1】：

工作码笔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;
  }  
}

【讨论】：

不幸的是，这并没有为我解决任何问题，因为它仍然占用窗口中的空间

【解决方案2】：

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

【讨论】：

它存在，因为它仍然显示在浏览器窗口中并且仍然可以点击。如果我将动画中的不透明度更改为不为 0 的值，它仍然清晰可见，因此很明显 display: none 根本没有被应用。
display: none - 对布局没有影响。（根据w3schools）。这意味着它不会阻止浏览器解析/加载该标记，但会阻止对其应用样式。
你需要它来切换点击吗？
嗯，这有点棘手。因此，为了完成您想要的操作，请执行以下操作： 1. 从 will-change 以及所有框架中删除显示。 2. 添加一个新类 .visuallyhidden { display: none; } 3. 在click的回调中添加：“setTimeout(function() { square.classList.add("visuallyhidden") }, 500)”
您可以查看工作示例here 如果需要解释，请阅读this 链接

【解决方案3】：

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

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

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

他们的 CSS

.visuallyhidden {
  display: none;
}

他们的 JS

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

【讨论】：