2012-04-03 17 views
13

Möchten Sie wissen, wie Sie ein div nach einer Reihe von CSS3-Animation ausblenden. Hier ist mein Code:Hide div nach CSS3 Animation

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

Hier ist die jsfiddle Probe zur besseren Veranschaulichung:

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

Irgendeine Idee, wie man die Box dauerhaft, am besten ohne Javascript versteckt?

Antwort

10

Leider gibt es keine beste Lösung, die nur CSS3 verwendet. Animationen kehren immer zu ihren Standardwerten zurück (see at Safari Developer Library).

Aber Sie können versuchen, mit -webkit-animation-fill-mode Eigenschaft zu spielen.

Zum Beispiel:

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

Es ist zumindest nicht sofort einen Kasten zum display:block; Zustand zurückzukehren.

Mit JavaScript können Sie dies tun, indem Sie webkitAnimationEnd Ereignis verwenden.

Zum Beispiel:

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

Example auf jsFiddle

+0

Ich benutze Chrome, und ohne das JS-Snippet kann das CSS3 selbst das 'display' nicht auf' none' ändern, auch nicht mit -webkit-animation-fill-mode: forwards; '. – qbolec

0

Das kann (Art) ohne Verwendung von JavaScript gelöst werden. Da Animationen Keyframes verwenden, können Sie nach etwas suchen, indem Sie die Dauer auf einen viel zu hohen Wert setzen, sagen Sie 1000s, und lassen Sie den Übergang bei einem niedrigen Frame enden, beispielsweise 0,1%.

Dadurch endet die Animation nie und bleibt daher in Form.

#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 ist in diesem speziellen Beispiel jedoch nicht notwendig. 10 Sekunden sollten für Hover-Effekte ausreichen.

Es ist jedoch auch möglich, die Animation zu überspringen und stattdessen grundlegende Übergänge zu verwenden.

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

gegabelt ich Ihre Geige und es verändert, die zwei zum Vergleich hinzufügen: http://jsfiddle.net/madr/Ru8wu/3/

(Ich habe auch -moz- da gibt es keinen Grund nicht zu ist -o- oder -ms- auch von Interesse sein könnten.).

3

Animation Definition ändern:

-webkit-animation:scaleme 1s forwards; 

Dies ist ein Wert für die animation fill mode.Ein Wert von 'forwards' weist die Animation an, die Eigenschaftswerte, die in ihrem letzten ausgeführten Schlüsselbild definiert sind, nach der letzten Iteration der Animation anzuwenden, bis der Animationsstil entfernt wird.

In Ihrem Beispiel wird der Animationsstil natürlich entfernt, wenn der Hover entfernt wird. Im Moment kann ich sehen, dass ein kleines Stück JavaScript benötigt wird, um eine Klasse hinzuzufügen, die die Animation auslöst. Da die Klasse niemals entfernt wird (bis die Seite neu geladen wird), bleibt das div verborgen.

1

Da Elemente von CSS-Animationen in ihrem ursprünglichen CSS Zustand zu beenden, machen den ursprünglichen Zustand verdeckt, indem es auf Null Skalierung oder Entfernen seine Opazität:

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

oder

div.container { 
opacity: 0; 
} 

Sobald die Animation abgeschlossen, kehrt das div zu seinem ursprünglichen CSS zurück, das versteckt ist.