如何在 css 动画后制作 div display:none 使其消失？

Question

我的网站上出现了癫痫警告，然后逐渐消失以揭示它是一场噩梦。可悲的是，在它消失之后，由于 div 不是 display:none 动画之后，您无法单击任何输入字段。这是 css3 动画代码：

#warning{
    background-color:Silver;
    width:100%;
    height:100%;
    position:absolute;
    z-index:2;
    -webkit-animation: warning 6s ease-out forwards;
}
@-webkit-keyframes warning {
    0%  {background-color:Silver;opacity:1;z-index:2;}
    80% {opacity:1;z-index:2;}
    100%{opacity:0;z-index:0;}
}

那么我怎样才能点击输入字段呢？

Answer 1

您可以尝试将 pointer-events:none; 添加到 #warning{。他们仍然可以点击覆盖层的东西（即使他们看不到它们）。

这是一个例子：

#warning{
    background-color:Silver;
    width:100%;
    height:100%;
    left: 0;
    position:absolute;
    pointer-events: none; /* The new addition */
    top: 0;
    z-index:2;
    -webkit-animation: warning 6s ease-out forwards;
}
@-webkit-keyframes warning {
    0%  {background-color:Silver;opacity:1;z-index:2;}
    80% {opacity:1;z-index:2;}
    100%{opacity:0;z-index:0;}
}

<button onclick="alert('clicked')">Click Me!!!</button>
<div id="warning">Warning!!!!!!</div>

编辑

或者，您可以将动画的 z-index 设置为 -1。

#warning{
    background-color:Silver;
    width:100%;
    height:100%;
    left: 0;
    position:absolute;
    top: 0;
    z-index:2;
    -webkit-animation: warning 6s ease-out forwards;
}
@-webkit-keyframes warning {
    0%  {background-color:Silver;opacity:1;z-index:2;}
    80% {opacity:1;z-index:2;}
    100%{opacity:0;z-index:-1;} /* Change Made */

<button onclick="alert('clicked')">Click Me!!!</button>
<div id="warning">Warning!!!!!!</div>

这显然取决于你想做什么。

Answer 2

您可以使用 javaScript animationend 事件。 (IE10++)

var cont = document.getElementById('warning');

cont.addEventListener("animationend", function(){
  console.log('animation ended, lets change display');
  cont.style.display = "none";
});

#warning{
    background-color:Silver;
    width:100%;
    height:100%;
    position:absolute;
    z-index:2;
    -webkit-animation: warning 6s ease-out forwards;
}
@-webkit-keyframes warning {
    0%  {background-color:Silver;opacity:1;z-index:2;}
    80% {opacity:1;z-index:2;}
    100%{opacity:0;z-index:0;}
}

<div id="warning"></div>

如何在 css 动画后制作 div display:none 使其消失？

How to make a div display:none after a css animation that makes it fade away?

html

css

animation

display

编辑