CSS3-Übergang - Ausblendeffekt

89

Ich versuche, den "Ausblendeffekt" in reinem CSS zu implementieren. Hier ist die Geige . Ich habe mir online einige Lösungen angesehen, aber nachdem ich die Dokumentation online gelesen habe , versuche ich herauszufinden, warum die Folienanimation nicht funktioniert. Irgendwelche Hinweise?

.dummy-wrap {
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;
}

.success-wrap {
  width: 75px;
  min-height: 20px;
  clear: both;
  margin-top: 10px;
}

.successfully-saved {
  color: #FFFFFF;
  font-size: 20px;
  padding: 15px 40px;
  margin-bottom: 20px;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #00b953;
}

@keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-moz-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-webkit-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-o-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}
<div class="dummy-wrap">
  <div class="success-wrap successfully-saved">Saved</div>
</div>
Erweitern Sie das Snippet

css css-transitions Penny Liu
quelle

Antworten:

92

Sie können stattdessen Übergänge verwenden:

.successfully-saved.hide-opacity{
    opacity: 0;
}

.successfully-saved {
    color: #FFFFFF;
    text-align: center;

    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 1;
}
karthikr
quelle
brauche heutzutage keine Browser-Präfixe mehr einfach nur ... Übergang: Deckkraft 3s Easy-In-Out;
danday74
165

Hier ist der andere Weg, dasselbe zu tun.

FadeIn-Effekt

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

FadeOut-Effekt

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

UPDATE 1: Ich habe ein aktuelleres Tutorial für CSS3 Transition gefunden: fadeIn- und fadeOut-ähnliche Effekte zum Ausblenden von Show-Elementen und QuickInfo Beispiel: Show Hide Hint oder Hilfetext mit CSS3 Transition hier mit Beispielcode.

UPDATE 2: (Hinzugefügte Details von @ big-money angefordert)

Wenn Sie das Element anzeigen (indem Sie zur sichtbaren Klasse wechseln), möchten wir, dass die Sichtbarkeit: sichtbar sofort aktiviert wird. Daher ist es in Ordnung, nur die Opazitätseigenschaft zu ändern. Und wenn wir das Element ausblenden (indem wir zur verborgenen Klasse wechseln), möchten wir die Sichtbarkeit verzögern: versteckte Deklaration, damit wir zuerst den Ausblendübergang sehen können. Dazu deklarieren wir einen Übergang für die Sichtbarkeitseigenschaft mit einer Dauer von 0 und einer Verzögerung. Einen ausführlichen Artikel finden Sie hier.

Ich weiß, dass ich zu spät bin, um zu antworten, aber diese Antwort zu posten, um anderen Zeit zu sparen. Hoffe es hilft dir !!

immayankmodi
quelle
10
Schöne Antwort, ich möchte hinzufügen display:none, um die Box zu löschen, wenn die "Verstecken" -Animation endet. Irgendeine Idee?
Apolo
1
Ich bin mir nicht sicher, was Sie hier brauchen, aber Sie können versuchen, display:blockstatt visibility: visiblein der .visibleKlasse ebenfalls display:nonestatt visibility: hiddenin der .hiddenKlasse aus dem obigen Beispiel.
Immayankmodi
4
@MMTac Das funktioniert nicht, da displayes sich nicht um eine der animierbaren CSS-Eigenschaften handelt . Siehe Animieren von „Anzeige: Block“ zu „Anzeige: Keine“ .
Peterflynn
@MayankModi Was ist der Sinn der ersten Nullen für die Sichtbarkeit des FadeOut-Effekts? Nach meinem Verständnis brauchen Sie nur die 2s
Big Money
1
@BigMoney ist für die Dauer und Verzögerung (sicher können Sie diese Nummern gemäß Ihren Anforderungen ändern, diese werden nur zum Beispiel verwendet). Überprüfen Sie, ob ich Details aktualisiert habe, da diese Antwort noch aktiv ist.
immayankmodi
12

Da displayist keine der animierbaren CSS-Eigenschaften. Ein display:nonefadeOut-Animationsersatz durch reine CSS3-Animationen, einfach festgelegt width:0und height:0zuletzt Frame, und animation-fill-mode: forwardszum Beibehalten width:0und height:0Eigenschaften verwenden.

@-webkit-keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;width: 100%; height: 100%;}
    100% { opacity: 0;width: 0; height: 0;}
}  
@keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;width: 100%; height: 100%;}
    100% { opacity: 0;width: 0; height: 0;}
}

.display-none.on{
    display: block;
    -webkit-animation: fadeOut 1s;
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
}
Rui Wang
quelle
Schauen Sie sich Hochleistungsanimationen an . Sie sollten die Verwendung von CSS-Eigenschaften vermeiden, die ein neues Layout auslösen widthund heightbeide vertraulich sind.
Penny Liu
4

Dies ist der Arbeitscode für Ihre Frage.
Viel Spaß beim Codieren ....

<html>
   <head>

      <style>

         .animated {
            background-color: green;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 10s;animation-duration: 10s;
            -webkit-animation-fill-mode: both;animation-fill-mode: both;
         }

         @-webkit-keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }

         @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }

         .fadeOut {
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
         }
      </style>

   </head>
   <body>

      <div id="animated-example" class="animated fadeOut"></div>

   </body>
</html>
Vishal Biradar
quelle
Bitte fügen Sie eine Erklärung Ihrer Lösung bei: Wie funktioniert es? Warum unterscheidet es sich von den anderen bereits veröffentlichten Lösungen?
Lifeisfoo
@lifeisfoo Ich habe es vor allem mit Lösungen versucht, aber dies ist der einfachste und einfachste Weg, und eine weitere wichtige Sache ist, dass der Text nach einigen Sekunden automatisch ausgeblendet wird (10). Also kein Klick nötig.
Vishal Biradar
3

Sie haben vergessen, der .dummy-wrapKlasse eine Positionseigenschaft hinzuzufügen , und die Werte oben / links / unten / rechts gelten nicht für statisch positionierte Elemente (Standardeinstellung).

http://jsfiddle.net/dYBD2/2/

treiben
quelle
Danke, aber wie würde ich mich nach dem Übergang insgesamt verstecken?
Es gibt mehrere Möglichkeiten - Sie können einfach die Erhöhung topWert , so dass es „aus“ Ansichtsfenster bewegt oder Sie können Opazität für die Animation verwenden , so dass es ausblendet , wie Sie scheinen zu wollen ..
adrift
1
großartig .. Ich habe das, aber noch eine Frage: Warum kommt der versteckte Div zurück, um auszublenden?
3 
.fadeOut{
    background-color: rgba(255, 0, 0, 0.83);
    border-radius: 8px;
    box-shadow: silver 3px 3px 5px 0px;
    border: 2px dashed yellow;
    padding: 3px;
}
.fadeOut.end{
    transition: all 1s ease-in-out;
    background-color: rgba(255, 0, 0, 0.0);
    box-shadow: none;
    border: 0px dashed yellow;
    border-radius: 0px;
}

Demo hier.


quelle