显示元素一秒钟，然后隐藏它。

Question

我想在按钮点击后，以CSS动画的方式短暂地展示一个元素，然后将其隐藏。具体步骤如下：

1. 将`elem`的属性设置为 `opacity: 0`。 2. 当按钮被选中时触发事件。 3. 事件函数将向`elem`添加，然后移除名为`show`的类。 4. CSS中采用如下属性：`transition: opacity 500ms ease 1000ms;`。 5. `#elem.show` 的属性设为 `opacity: 1`。

问题是，当按钮被点击时没有任何反应。我该如何在没有转换效果的情况下显示元素，然后在1秒后进行转换并关闭？

JSFiddle

var btn = document.getElementById('btn');
var elem = document.getElementById('elem');

btn.addEventListener('click', function() {
  elem.classList.add('show');
  elem.classList.remove('show');
});

#elem {
  background-color: orange;
  width: 100px;
  height: 100px;
  opacity: 0;
  transition: opacity 500ms ease 1000ms;
}
#elem.show {
  opacity: 1;
  transition: none;
}

<button id="btn">Press Me</button>
<div id="elem"></div>

- Jessica

---

你需要在1秒钟后移除该类。 - Arun P Johny

你添加/删除类太快了... - Jaromanda X

@Jessica：使用toggle... - Darshak

JavaScript的哪些深处有一个toggle？@DarshakGajjar - Jaromanda X

Answer 1

使用 setTimeout 不够整洁 - 更好的方法是监听 动画结束事件 并移除 show 类。我还使用了 animation 来连续显示和隐藏元素 - 请参见下面的演示：

var btn = document.getElementById('btn');
var elem = document.getElementById('elem');

btn.addEventListener('click', function() {
  elem.classList.remove('show');
  // this force-restarts the CSS animation
  void elem.offsetWidth;
  elem.classList.add('show');
});

elem.addEventListener("animationend", function(){
  elem.classList.remove('show');
}, false);

#elem {
  background-color: orange;
  width: 100px;
  height: 100px;
  opacity: 0;
}
#elem.show {
  animation: anime 1s 1;
}
@keyframes anime {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<button id="btn">Press Me</button>
<div id="elem"></div>

---

更新

实际上，听取animation-end事件似乎并不必要 - 即使没有它，它也可以正常工作。这里的要点是使用void elem.offsetWidth来强制性地重新启动动画：

var btn = document.getElementById('btn');
var elem = document.getElementById('elem');

btn.addEventListener('click', function() {
  elem.classList.remove('show');
  // this force-restarts the CSS animation
  void elem.offsetWidth;
  elem.classList.add('show');
});

#elem {
  background-color: orange;
  width: 100px;
  height: 100px;
  opacity: 0;
}
#elem.show {
  animation: anime 1s 1;
}
@keyframes anime {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<button id="btn">Press Me</button>
<div id="elem"></div>

- kukkuz

---

为什么使用 setTimeout 不够整洁？ - Jessica

另外，如果您反复点击按钮，则元素将消失。我不希望出现这种行为。我希望它在您单击按钮的同时保持存在，然后再过1秒钟消失（就像被接受的答案一样）。但是感谢您的回答！ - Jessica

关于为什么setTimeout不太整洁的问题 - 其中一个原因是，当您在真实的重载页面中执行此操作时，DOM加载时间可能会影响到它（特别是如果您的监听器内有大量代码），这可能导致您的CSS animation duration和setTimemout不完全匹配（这就是为什么回调更受欢迎的原因）。另一个原因只是您必须注意在CSS和JS中保持相同的秒数，这可能会在实际项目中引起麻烦... - kukkuz

刚试了一下演示，反复点击按钮不会让正方形停留。 - Jessica

@Jessica 抱歉，我在那里犯了一个错误，已经更正了答案，感谢您的理解！ :) - kukkuz

Answer 2

这是其他答案的借鉴，解决了多次按键的问题。

var btn = document.getElementById('btn');
var elem = document.getElementById('elem');

btn.addEventListener('click', (function() {
  var timer = null;
  return function() {
    elem.classList.add('show');
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    timer = setTimeout(e => elem.classList.remove('show'), 1000);
  };
})());

#elem {
    background-color: orange;
    width: 100px;
    height: 100px;
    opacity: 0;
    transition: opacity 500ms ease 500ms;
}

#elem.show {
    opacity: 1;
    transition: none;
}

<button id="btn">Press Me</button>
<div id="elem"></div>

- Jaromanda X

---

谢谢！“if (timer)” 的目的是什么呢？（我知道它检查 null，但为什么要这样做？） - Jessica

好的，你可以直接使用clearTimeout。 - Jaromanda X

谢谢。我会接受@binariedMe的答案，因为他最先回答了，但我会给你点赞。 - Jessica

没问题 - 没看到编辑版，只是你对此有些担忧 :p - Jaromanda X

Answer 3

只需要这样做：

 setTimeout(function() { elem.classList.remove('show'); }, 1000);

改为写成：

elem.classList.remove('show');

为了处理重复点击，请按照以下步骤进行操作：

var btn = document.getElementById('btn');
var elem = document.getElementById('elem');
var timeOutFunc;

btn.addEventListener('click', function() {
  elem.classList.add('show');
  clearTimeout(timeOutFunc);
  timeOutFunc = setTimeout(function() {elem.classList.remove('show') } , 1000);
});

- binariedMe

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Jessica

这应该避免重复点击问题。 - binariedMe

Answer 4

尝试使用以下内容...希望能解决您的问题

https://jsfiddle.net/b3en368p/5/

var btn = document.getElementById('btn');
var elem = document.getElementById('elem');

btn.addEventListener('click', function() {
    elem.classList.add('show');
     setTimeout(function(text){
        elem.classList.remove('show');
      }, 1000);

});

- Darshak

---

应该使用 setTimeout。 - Sandeep Nayak

Answer 5

添加 CSS

#elem {
    background-color: orange;
    width: 100px;
    height: 100px;
    display: none;
}

#elem.show {
    display: block;
}

你的监听器应该像这样-

btn.addEventListener('click', function() {
    elem.classList.add('show');
    setTimeout(function(){
        elem.classList.remove('show');
    }, 1000);
});

- SarangK

---

谢谢！我想到了，但问题是，如果你反复点击按钮，它不会重新启动计时器。有没有一种方法在调用计时器之前重新启动计时器？ - Jessica

@Jessica 请查看这个 JSFiddle- https://jsfiddle.net/sarang2009/bL37pL85/ ，这是否符合您的预期？ - SarangK