Question

我的网站上出现了癫痫警告，然后逐渐消失，揭示了它的噩梦。可悲的是，在它消失之后，由于div不显示而无法点击任何输入字段：动画后没有。这是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{。他们仍然可以通过叠加点击事物（即使他们无法看到它们）。

以下是一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

修改

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

＆＃13;

#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 */

＆＃13;

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

＆＃13;

这完全取决于你想要做什么。

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>

如何进行div显示：在css动画之后没有使它消失？

2 个答案:

修改