Question

想知道如何在一组css3动画后隐藏div。这是我的代码：

HTML

<div id='box'>
    hover me
</div>

CSS3

#box{
 position:absolute;
 top:200px;
 left:200px;
 width:200px;
 height:150px;
 background-color:red;
}

#box:hover{
  -webkit-animation:scaleme 1s;
}

@-webkit-keyframes scaleme {
  0% { -webkit-transform: scale(1); opacity: 1; }
  100% { -webkit-transform: scale(3); opacity: 0;display:none; }
}

以下是jsfiddle示例，以便更好地说明：

http://jsfiddle.net/mochatony/Pu5Jf/18/

任何想法如何永久隐藏盒子，最好没有javascript？

Answer 1

不幸的是，没有最好的解决方案只使用CSS3。动画始终返回其默认值（see at Safari Developer Library）。

但您可以尝试使用-webkit-animation-fill-mode属性。

例如：

#box:hover{
  -webkit-animation:scaleme 1s;
  -webkit-animation-fill-mode: forwards;
}

至少不会立即将一个方框返回display:block;州。

使用JavaScript，您可以使用webkitAnimationEnd事件来执行此操作。

例如：

var myBox = document.getElementById('box');
myBox.addEventListener('webkitAnimationEnd',function( event ) { myBox.style.display = 'none'; }, false);

jsFiddle上的

Example

Answer 2

将动画定义更改为：

-webkit-animation:scaleme 1s forwards;

这是animation fill mode的值。值'forwards'告诉动画在动画的最后一次迭代之后应用在其上一个执行关键帧中定义的属性值，直到移除动画样式。

当然，在您的示例中，移除悬停时将删除动画样式。目前我可以看到需要一小段JavaScript来添加一个触发动画的类。由于该类永远不会被删除（直到重新加载页面），div才会保持隐藏状态。

Answer 3

由于CSS动画的元素以其原始CSS状态结束，因此通过将原始状态缩放为零或删除其不透明度来隐藏原始状态：

div.container {
transform: scale(0);
-webkit-transform: scale(0);
}

或

div.container {
opacity: 0;
}

动画完成后，div将返回其隐藏的原始CSS。

Answer 4

可以在不使用JavaScript的情况下解决（种类）。由于动画使用关键帧，因此您可以通过将持续时间设置为过高的值（例如1000秒）并让您以低帧结束转换（例如0.1％）来提出要求。

通过这样做，动画永远不会结束，因此保持形状。

#box:hover {
  -webkit-animation:scaleme 1000s;
}

@-webkit-keyframes scaleme {
  0% { -webkit-transform: scale(1); opacity: 1; }
  0.1%, 100% { -webkit-transform: scale(3); opacity: 0;display:none; }
}

但是，在这个特定的例子中，

1000不是必需的。 10s应该足以悬停效果。

然而，也可以跳过动画并使用基本过渡。

#box2:hover {
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;  
  -moz-transform: scale(3);
  -webkit-transform: scale(3);
  opacity: 0;
}

我分叉你的小提琴并改变它，加上两个用于比较：http://jsfiddle.net/madr/Ru8wu/3/

（我还添加了-moz-，因为没有理由不这样做。-o-或-ms-也可能感兴趣。

在CSS3动画后隐藏div

4 个答案: