Animation CSS3: Anzeige + Opazität

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 entfernen Sie die Veränderung der Anzeige.
Ich möchte die Anzeige ändern, nur nach dem schweben, aber die Deckkraft zu ändern, die mit dem übergang.

InformationsquelleAutor der Frage Alexis Delrieu | 2011-12-09

Basierend auf Michaels Antwort, das ist die eigentliche CSS-code zu verwenden

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

InformationsquelleAutor der Antwort Chris

Können Sie mit CSS-Animationen:

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

InformationsquelleAutor der Antwort Michael Mullany

Wenn möglich, verwenden Sie visibility statt 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;
}

InformationsquelleAutor der Antwort tomas.satinsky

Diese Problemumgehung funktioniert:

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

Dieses "Schlüsselbild" auf "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;
}

InformationsquelleAutor der Antwort Hermann77

Ich ein wenig verändert, aber das Ergebnis ist schön.

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

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

Danke an alle.

InformationsquelleAutor der Antwort Alexis Delrieu

Gibt es eine andere gute Methode, um dies getan durch die Verwendung von pointer-events:

.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 ist das nicht unterstützt IE10 und unten.

InformationsquelleAutor der Antwort RafaelKr

4

Ich hatte das gleiche problem. Ich habe versucht mit Animationen statt übergänge - wie vorgeschlagen von @MichaelMullany und @Chris - aber es funktioniert nur für webkit-Browser, auch wenn ich das kopieren-einfügen mit "-moz" und "-o" - Präfixe.

War ich in der Lage zu bekommen, um das problem durch die Verwendung visibility statt display. Dies funktioniert für mich, weil mein Kind element ist position: absoluteso Belegfluss ist nicht betroffen. Es funktioniert möglicherweise auch für andere.

Dies ist, was der ursprüngliche code Aussehen würde mit meiner Lösung:
```
.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;
}
```
InformationsquelleAutor der Antwort Dave

Habe ich diese, es zu erreichen. Verschwinden Sie auf schweben, aber nehmen 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;
}

InformationsquelleAutor der Antwort felixhirschfeld

2

Absolute oder Feste Elemente konnte man auch mit z-index:
```
.item {
    position: absolute;
    z-index: -100;
}

.item:hover {
    z-index: 100;
}
```
Anderen Elemente sollte ein z-index zwischen -100 und 100 jetzt.

InformationsquelleAutor der Antwort Luca Steeb
1

Ich weiß, das ist nicht wirklich eine Lösung für Ihre Frage, weil Sie Fragen für

display + Deckkraft

Mein Ansatz löst eine mehr Allgemeine Frage, aber vielleicht war dies der hintergrund-problem sollte gelöst werden, indem mit display in Kombination mit opacity.

Mein Wunsch war, um das Element aus dem Weg, wenn es nicht sichtbar ist.
Diese Lösung macht genau das: Es bewegt das element, aus dem Weg, und dies kann verwendet werden, für den übergang:
```
.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 browser-Präfixe-oder rückwärts-Kompatibilität hacks. Es zeigt einfach, dass das Konzept, wie das element Weg bewegt wird, da es nicht mehr benötigt.

Der interessante Teil sind das zwei verschiedene übergänge-Definitionen. Wenn der Mauszeiger schwebt die .parent element der .child element muss in Kraft gesetzt werden sofort und dann die Deckkraft geändert werden:
```
transition: left 0s, visibility 0s, opacity 0.8s;
```
Wenn es keine Maus oder der Maus-Zeiger bewegt war von dem element, man muss warten, bis die Deckkraft zu ändern beendet hat, bevor das element verschoben werden können, off-screen:
```
transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
```
Bewegen des Objekts Weg wird eine gangbare alternative in einem Fall, wo die Einstellung display:none würde nicht brechen das layout.

Ich hoffe ich trifft den Nagel auf den Kopf für diese Frage, obwohl ich nicht zu beantworten.

InformationsquelleAutor der Antwort Hannes Morgenstern
1

Wenn Sie die Auslösung der änderung mit JS, lassen Sie uns sagen, auf auf, es gibt einen schönen workaround.

Sehen Sie das problem geschieht, weil die animation wird ignoriert, auf display:none-element, aber browser gilt, alle änderungen auf einmal und das element wird nie display:block zwar nicht animiert, in der gleichen Zeit.

Der trick ist, zu bitten, den browser zu Rendern das Bild nach ändern der Sichtbarkeit, sondern vor Auslösung der animation.

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);
```
InformationsquelleAutor der Antwort daniel.sedlacek
0

Eine Sache, die ich Tat, war die anfängliche Staat die Marge, um so etwas wie "margin-left: -9999px", damit es nicht auf dem Bildschirm angezeigt, und setzen Sie dann "margin-left: 0" auf den hover-Zustand. Halten Sie es "display: block" in diesem Fall. Hat den trick für mich 🙂

Edit: den Zustand Sichern und nicht wieder den alten hover-Zustand? Ok, hier müssen 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>
```
InformationsquelleAutor der Antwort Joshua

Animation auf beiden Möglichkeiten onHoverIn/Out habe ich diese Lösung. 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;
  }
}

InformationsquelleAutor der Antwort Nicholas

-4

display: ist nicht transitionable. Sie werden wahrscheinlich brauchen, um jQuery verwenden zu tun, was Sie tun möchten.

InformationsquelleAutor der Antwort Madara Uchiha

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.