在CSS3动画后隐藏div

想知道如何在一组css3动画后隐藏div。这里是我的代码：在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？

来源

2012-04-03 TonyTakeshi

不幸的是，没有最好的解决方案，只使用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事件来完成此操作。

例如：上的jsfiddle

来源

2012-04-03 11:04:19 antyrat

我使用的是Chrome，没有JS代码片段，即使使用-webkit-animation-fill-mode：forwards; CSS3本身也不能将'display'更改为'none'。 – qbolec 2014-06-22 19:50:48

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

Example即可以（种）在不使用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; } 
}

1000s在这个特殊的例子中不是必需的。 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-也可能会感兴趣。）。

来源

2012-04-03 12:25:09 madr

动画定义修改为：

-webkit-animation:scaleme 1s forwards;

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

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

来源

2012-04-03 14:47:00

由于CSS动画的元素在原来的CSS状态结束，让被它扩展到零或删除其不透明度隐藏在原始状态：

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

或

div.container { 
opacity: 0; 
}

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

来源

2016-01-24 02:27:52 NicB

在CSS3动画后隐藏div

回答

相关问题