在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

回答

相關問題