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

Question

我试图在短时间内显示一个元素，然后在按钮点击时将其隐藏为CSS过渡。

这是我所做的概要。

1. collections.OrderedDict((k,(a, not b)) for k, (a,b) in activities.items()) 的属性为elem。
2. 选择按钮时的火灾事件。
3. 事件函数将添加，然后将名为opacity: 0的类移至show。
4. CSS具有以下属性：elem。
5. transition: opacity 500ms ease 1000ms;的属性为#elem.show。

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

JSFiddle

＆＃13;
＆＃13;
1s
＆＃13;
var btn = document.getElementById('btn');
var elem = document.getElementById('elem');

btn.addEventListener('click', function() {
  elem.classList.add('show');
  elem.classList.remove('show');
});
＆＃13;
#elem {
  background-color: orange;
  width: 100px;
  height: 100px;
  opacity: 0;
  transition: opacity 500ms ease 1000ms;
}
#elem.show {
  opacity: 1;
  transition: none;
}
＆＃13;
＆＃13;
＆＃13;

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

试试这个...我希望它能解决你的问题

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 4

这借鉴了其他答案，并解决了多个问题“问题”

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