webentwicklung-frage-antwort-db.com.de

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

Ich möchte die Anzeige gleich nach dem Schwebeflug ändern, aber die Deckkraft sollte mit dem Übergang geändert werden.

75
Alexis Delrieu

Ich habe mich etwas 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.

6
Alexis Delrieu

Basierend auf der Antwort von Michaels 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;
    }
}
98
Chris

Sie können CSS-Animationen verwenden:

0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;
37
Michael Mullany

Wenn möglich - verwende visibility anstelle von display

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;
}
29
tomas.satinsky

Diese Problemumgehung funktioniert:

  1. definieren Sie ein "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;
    }
    
8
Hermann Schwarz

Ich habe das genutzt, um es zu erreichen. Sie verblassen im Schwebeflug, nehmen jedoch keinen Platz, 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;
}
6
felixhirschfeld

Es gibt eine andere gute Methode, um dies mit 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.

5
RafaelKr

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, auch wenn ich die Präfixe "-moz" und "-o" kopierte.

Ich konnte das Problem umgehen, indem ich visibility anstelle von display verwendete. Dies funktioniert für mich, da mein untergeordnetes Element position: absolute ist und der Dokumentenfluss nicht beeinflusst wird. Es könnte auch für andere funktionieren.

So würde der Originalcode 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;
}
4
Dave

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

Das Problem tritt auf, weil die Animation bei der Anzeige ignoriert wird: Kein Element außer Browser übernimmt alle Änderungen gleichzeitig und das Element wird nie display: block angezeigt, während es nicht gleichzeitig animiert ist. 

Der Trick besteht darin, den Browser aufzufordern, das Bild zu rendern, nachdem die Sichtbarkeit geändert wurde, aber bevor die Animation ausgelöst wurde.

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);
2
daniel.sedlacek

Ich weiß, das ist nicht wirklich eine Lösung für deine Frage, weil du darum bittest

anzeige + Deckkraft

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

Mein Wunsch war es, das Element aus dem Weg zu räumen, wenn es nicht sichtbar ist. Diese Lösung macht genau das: Es verschiebt das Element aus dem Weg, und dies 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 wird lediglich das Konzept veranschaulicht, wie das Element entfernt wird, da es nicht mehr benötigt wird.

Der interessante Teil sind die zwei verschiedenen Übergangsdefinitionen. Wenn der Mauszeiger über dem .parent Element das .child Element muss sofort platziert werden und dann wird die Deckkraft geändert:

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

Wenn kein Hover vorhanden ist oder der Mauszeiger vom Element entfernt wurde, muss gewartet werden, bis die Änderung der Deckkraft abgeschlossen ist, bevor das Element vom Bildschirm entfernt werden kann:

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

Das Entfernen des Objekts ist eine sinnvolle Alternative, wenn display:none würde das Layout nicht unterbrechen.

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

2

Bei absoluten oder festen Elementen können Sie auch 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.

2
Luca Steeb

WIE MAN OPACITY MIT CSS ANIMIERT:
das ist mein Code:
den 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

1
zakizakibzr

Um auf beiden Wegen eine Animation auf HoverIn/Out zu haben, habe ich diese Lösung gemacht. Ich hoffe es hilft jemandem

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

Eine Sache, die ich gemacht habe, war, den Rand des Anfangszustands auf etwas wie "margin-left: -9999px" zu setzen, damit er nicht auf dem Bildschirm angezeigt wird, und setzt dann im Hover-Status "margin-left: 0" zurück. Behalten Sie in diesem Fall "Anzeige: Blockieren". Habe den Trick für mich gemacht :)

Bearbeiten: Speichern Sie den Status und kehren Sie nicht zum vorherigen Hover-Status zurück. 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>
0
Joshua