J'ai un problème avec une animation CSS3.
.child {
opacity: 0;
display: none;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.parent:hover .child {
opacity: 0.9;
display: block;
}
Ce code ne fonctionne que si je supprime le changement de display
.
Je veux changer l'affichage juste après le survol, mais l'opacité doit être modifiée en utilisant la transition.
J'ai un peu changé mais le résultat est magnifique.
.child {
width: 0px;
height: 0px;
opacity: 0;
}
.parent:hover child {
width: 150px;
height: 300px;
opacity: .9;
}
Merci tout le monde.
Basé sur Michaels answer, c’est le code CSS à utiliser
.parent:hover .child
{
display: block;
-webkit-animation: fadeInFromNone 0.5s ease-out;
-moz-animation: fadeInFromNone 0.5s ease-out;
-o-animation: fadeInFromNone 0.5s ease-out;
animation: fadeInFromNone 0.5s ease-out;
}
@-webkit-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@-moz-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@-o-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
Vous pouvez faire avec des animations CSS:
0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;
Si possible - utilisez visibility
au lieu de display
Par exemple:
.child {
visibility: hidden;
opacity: 0;
transition: opacity 0.3s, visibility 0.3s;
}
.parent:hover .child {
visibility: visible;
opacity: 1;
transition: opacity 0.3s, visibility 0.3s;
}
Cette solution de contournement fonctionne:
définir une "image clé":
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
20% { opacity: 0; }
40% { opacity: 0.3; }
60% { opacity: 0.5; }
80% { opacity: 0.9; }
100% { opacity: 1; }
}
@keyframes fadeIn {
0% { opacity: 0; }
20% { opacity: 0; }
40% { opacity: 0.3; }
60% { opacity: 0.5; }
80% { opacity: 0.9; }
100% { opacity: 1; }
}
Utilisez cette "image clé" en "survol":
div a span {
display: none;
}
div a:hover span {
display: block;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 1s;
animation-name: fadeIn;
animation-duration: 1s;
}
Je l'ai utilisé pour y parvenir. Ils disparaissent peu à peu mais ne prennent pas de place quand ils sont cachés, parfait!
.child {
height: 0px;
opacity: 0;
visibility: hidden;
transition: all .5s ease-in-out;
}
.parent:hover child {
height: auto;
opacity: 1;
visibility: visible;
}
Il existe une autre bonne méthode pour ce faire en utilisant des événements de pointeur:
.child {
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.parent:hover .child {
opacity: 0.9;
pointer-events: all;
}
Malheureusement, ceci n'est pas supporté dans IE10 et inférieur.
J'ai eu le même problème. J'ai essayé d'utiliser des animations au lieu de transitions - comme suggéré par @MichaelMullany et @Chris - mais cela ne fonctionnait que pour les navigateurs Webkit, même si je copiais avec les préfixes "-moz" et "-o".
J'ai pu contourner le problème en utilisant visibility
au lieu de display
. Cela fonctionne pour moi car mon élément enfant est position: absolute
. Le flux de documents n'est donc pas affecté. Cela pourrait fonctionner pour les autres aussi.
Voici à quoi ressemblerait le code original avec ma solution:
.child {
position: absolute;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.parent:hover .child {
position: relative;
opacity: 0.9;
visibility: visible;
}
Si vous déclenchez le changement avec JS, disons au clic, il existe une solution de contournement de Nice.
Vous voyez que le problème se produit car l'animation est ignorée à l'affichage: aucun élément, mais le navigateur applique toutes les modifications en même temps et l'élément n'est jamais display: block tant qu'il n'est pas animé en même temps.
L'astuce consiste à demander au navigateur de rendre le cadre après avoir modifié la visibilité, mais avant de déclencher l'animation.
Voici un exemple JQuery:
$('.child').css({"display":"block"});
//now ask the browser what is the value of the display property
$('.child').css("display"); //this will trigger the browser to apply the change. this costs one frame render
//now a change to opacity will trigger the animation
$('.child').css("opacity":100);
Sur les éléments absolus ou fixes, vous pouvez également utiliser z-index:
.item {
position: absolute;
z-index: -100;
}
.item:hover {
z-index: 100;
}
Les autres éléments devraient avoir un indice z compris entre -100 et 100 maintenant.
COMMENT ANIMER UNE OPACITÉ AVEC CSS:
voici mon code:
le code CSS
.item {
height:200px;
width:200px;
background:red;
opacity:0;
transition: opacity 1s ease-in-out;
}
.item:hover {
opacity: 1;
}
code {
background: linear-gradient(to right,#fce4ed,#ffe8cc);
}
<div class="item">
</div>
<p><code> move mouse over top of this text</code></p>
ou consultez ce fichier de démonstration
fonction vote () {
var vote = getElementById ("yourOpinion")
if (this.workWithYou):
vote + = 1};
lol
Je sais, ce n'est pas vraiment une solution à votre question, parce que vous demandez
affichage + opacité
Mon approche résout une question plus générale, mais c'est peut-être le problème de fond qui devrait être résolu en utilisant display
en combinaison avec opacity
.
Mon désir était d'éliminer l'élément quand il n'est pas visible ..__ Cette solution fait exactement cela: Elle déplace l'élément hors de distance, et cela peut être utilisé pour la transition:
.child {
left: -2000px;
opacity: 0;
visibility: hidden;
transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
}
.parent:hover .child {
left: 0;
opacity: 1;
visibility: visible;
transition: left 0s, visibility 0s, opacity 0.8s;
}
Ce code ne contient aucun préfixe de navigateur ou piratage de compatibilité ascendante. Cela illustre simplement le principe selon lequel l'élément est éloigné car il n'est plus nécessaire.
La partie intéressante concerne les deux définitions de transition différentes. Lorsque le pointeur de la souris survole l'élément .parent
, l'élément .child
doit être mis en place immédiatement, puis l'opacité sera modifiée:
transition: left 0s, visibility 0s, opacity 0.8s;
Lorsqu'il n'y a pas de survol ou que le pointeur de la souris a été déplacé de l'élément, il faut attendre la fin du changement d'opacité pour que l'élément puisse être retiré de l'écran:
transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
Déplacer l'objet sera une alternative viable dans le cas où définir display:none
ne casse pas la mise en page.
J'espère avoir mis le doigt dessus pour cette question bien que je n'y aie pas répondu.
Pour avoir une animation sur les deux manières onHoverIn/Out j'ai fait cette solution. J'espère que ça va aider quelqu'un
@keyframes fadeOutFromBlock {
0% {
position: relative;
opacity: 1;
transform: translateX(0);
}
90% {
position: relative;
opacity: 0;
transform: translateX(0);
}
100% {
position: absolute;
opacity: 0;
transform: translateX(-999px);
}
}
@keyframes fadeInFromNone {
0% {
position: absolute;
opacity: 0;
transform: translateX(-999px);
}
1% {
position: relative;
opacity: 0;
transform: translateX(0);
}
100% {
position: relative;
opacity: 1;
transform: translateX(0);
}
}
.drafts-content {
position: relative;
opacity: 1;
transform: translateX(0);
animation: fadeInFromNone 1s ease-in;
will-change: opacity, transform;
&.hide-drafts {
position: absolute;
opacity: 0;
transform: translateX(-999px);
animation: fadeOutFromBlock 0.5s ease-out;
will-change: opacity, transform;
}
}
Une chose que j'ai faite a été de régler la marge de l'état initial sur quelque chose comme "marge-gauche: -9999px" afin qu'elle n'apparaisse pas à l'écran, puis de réinitialiser "marge-gauche: 0" sur l'état de survol. Gardez-le "display: block" dans ce cas. L'astuce pour moi :)
Edit: Sauvegarder l'état et ne pas revenir à l'état de survol précédent? Ok ici nous avons besoin de JS:
<style>
.hovered {
/* hover styles here */
}
</style>
<script type="text/javascript">
$('.link').hover(function() {
var $link = $(this);
if (!$link.hasclass('hovered')) { // check to see if the class was already given
$(this).addClass('hovered');
}
});
</script>