Animation CSS3: Anzeige + Deckkraft

Ich habe ein Problem mit einer CSS3-Animation.

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

Dieser Code funktioniert nur, wenn ich die Änderung von entferne display.

Ich möchte die Anzeige direkt nach dem Hover ändern, aber die Deckkraft sollte über den Übergang geändert werden.

Basierend auf Michaels Antwort ist dies der tatsächlich zu verwendende CSS-Code

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

Sie können mit CSS-Animationen arbeiten:

0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;

Wenn möglich - visibilityanstelle von verwendendisplay

Zum Beispiel:

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

Diese Problemumgehung funktioniert:

1. Definieren Sie einen „Keyframe“:

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

2. Verwenden Sie diesen "Keyframe" für "Hover":

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

Ich habe das benutzt, um es zu erreichen. Sie verblassen beim Schweben, nehmen aber keinen Platz ein, wenn sie versteckt sind, perfekt!

.child {
    height: 0px;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in-out;
}

.parent:hover child {
    height: auto;
    opacity: 1;
    visibility: visible;
}

Ich habe mich ein bisschen verändert, aber das Ergebnis ist wunderschön.

.child {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.parent:hover child {
    width: 150px;
    height: 300px;
    opacity: .9;
}

Dank an alle.

Es gibt eine andere gute Methode, um dies mithilfe von Zeigerereignissen zu erreichen:

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

Leider wird dies in IE10 und darunter nicht unterstützt.

Ich hatte das gleiche Problem. Ich habe versucht, Animationen anstelle von Übergängen zu verwenden - wie von @MichaelMullany und @Chris vorgeschlagen -, aber es funktionierte nur für Webkit-Browser, selbst wenn ich mit den Präfixen "-moz" und "-o" kopiert habe.

Ich konnte das Problem umgehen, indem ich visibilityanstelle von verwendete display. Dies funktioniert bei mir, weil mein untergeordnetes Element so ist position: absolute, dass der Dokumentenfluss nicht beeinträchtigt wird. Es könnte auch für andere funktionieren.

So würde der ursprüngliche Code mit meiner Lösung aussehen:

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

Wenn Sie die Änderung mit JS auslösen, sagen wir beim Klicken, gibt es eine nette Problemumgehung.

Sie sehen, dass das Problem auftritt, weil die Animation bei der Anzeige ignoriert wird: Kein Element, aber der Browser wendet alle Änderungen gleichzeitig an und das Element wird nie angezeigt: Blockieren, während es nicht gleichzeitig animiert ist.

Der Trick besteht darin, den Browser zu bitten, den Rahmen nach dem Ändern der Sichtbarkeit, aber vor dem Auslösen der Animation zu rendern.

Hier ist ein JQuery-Beispiel:

    $('.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);

Für absolute oder feste Elemente können Sie auch den Z-Index verwenden:

.item {
    position: absolute;
    z-index: -100;
}

.item:hover {
    z-index: 100;
}

Andere Elemente sollten jetzt einen Z-Index zwischen -100 und 100 haben.

Ich weiß, das ist keine wirkliche Lösung für Ihre Frage, weil Sie danach fragen

Anzeige + Deckkraft

Mein Ansatz löst eine allgemeinere Frage, aber vielleicht war dies das Hintergrundproblem, das durch die Verwendung displayin Kombination mit gelöst werden sollte opacity.

Mein Wunsch war es, das Element aus dem Weg zu räumen, wenn es nicht sichtbar ist. Diese Lösung macht genau das: Sie bewegt das Element aus dem Weg und kann für den Übergang verwendet werden:

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

Dieser Code enthält keine Browserpräfixe oder Abwärtskompatibilitäts-Hacks. Es zeigt nur das Konzept, wie das Element wegbewegt wird, da es nicht mehr benötigt wird.

Der interessante Teil sind die zwei unterschiedlichen Übergangsdefinitionen. Wenn sich der Mauszeiger über dem .parentElement befindet, muss das Element .childsofort platziert werden, und dann wird die Deckkraft geändert:

transition: left 0s, visibility 0s, opacity 0.8s;

Wenn es keinen Hover gibt oder der Mauszeiger vom Element wegbewegt wurde, muss gewartet werden, bis die Deckkraftänderung abgeschlossen ist, bevor das Element vom Bildschirm wegbewegt werden kann:

transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;

Das Verschieben des Objekts ist eine praktikable Alternative in einem Fall, in dem die Einstellung display:nonedas Layout nicht beschädigen würde.

Ich hoffe, ich habe bei dieser Frage den Nagel auf den Kopf getroffen, obwohl ich sie nicht beantwortet habe.

Eine Sache, die ich getan habe, war, den Rand des Anfangszustands auf "Rand-Links: -9999px" zu setzen, damit er nicht auf dem Bildschirm angezeigt wird, und dann "Rand-Links: 0" im Schwebezustand zurückzusetzen. Behalten Sie in diesem Fall "display: block" bei. Hab den Trick für mich gemacht :)

Bearbeiten: Status speichern und nicht zum vorherigen Schwebezustand zurückkehren? Ok hier brauchen wir 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>

Um Animation in beide Richtungen onHoverIn / Out zu haben, habe ich diese Lösung gemacht. Hoffe es wird jemandem helfen

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

WIE MAN OPACITY MIT CSS ANIMIERT:
Dies ist mein Code:
der CSS-Code

.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>

oder überprüfen Sie diese Demo-Datei

Funktion vote () {
var vote = getElementById ("yourOpinion")
if (this.workWithYou):
vote + = 1};
lol

display:ist nicht übertragbar. Sie müssen wahrscheinlich jQuery verwenden, um das zu tun, was Sie tun möchten.