显示元素一秒钟，然后将其隐藏

Question

我正在尝试在短时间内显示一个元素，然后在单击按钮时用 CSS 过渡将其隐藏。

以下是我所做的事情的概述。

1. elem具有opacity: 0的属性。
2. 选择按钮时触发事件。
3. 事件函数将添加，然后删除一个名为 show 的类以elem 。
4. CSS 具有以下属性：transition: opacity 500ms ease 1000ms; 。
5. #elem.show具有opacity: 1的属性。

问题是，单击按钮时没有任何反应。如何在没有过渡效果的情况下显示元素，然后在1s以过渡关闭之后？

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>

Answer 1

使用 setTimeout 并不整洁 - 最好听animation end event并删除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>

---

更新

实际上，侦听动画结束事件似乎没有必要 - 即使没有它，它也能正常工作。这里的要点是使用 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>

Answer 2

只需这样做：

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

Answer 3

这借鉴了其他答案，并解决了多次按"问题"

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>

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

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