Przejście CSS3 - efekt zanikania

101

Próbuję zaimplementować efekt „zanikania” w czystym CSS. Oto skrzypce . Sprawdziłem kilka rozwiązań online, jednak po przeczytaniu dokumentacji online próbuję dowiedzieć się, dlaczego animacja slajdów nie działa. Jakieś wskazówki?

.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>
Rozwiń fragment

css css-transitions Penny Liu
źródło

Odpowiedzi:

101

Zamiast tego możesz użyć przejść:

.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
źródło
6
nie potrzebuję w dzisiejszych czasach prefiksów przeglądarki po prostu zwykły '... przejście: krycie 3s łatwość wprowadzania;
danday74
182

Oto inny sposób, aby zrobić to samo.

efekt zanikania

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

efekt fadeOut

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

UPDATE 1: Znalazłem bardziej aktualny tutorial CSS3 Transition: fadeIn i fadeOut jak efekty do ukrycia elementów pokazu i podpowiedzi Przykład: Pokaż Ukryj wskazówkę lub tekst pomocy przy użyciu przejścia CSS3 tutaj z przykładowym kodem.

UPDATE 2: (Dodano szczegóły wymagane przez @ big-money)

Podczas wyświetlania elementu (przełączając się na widoczną klasę), chcemy, visibility:visibleaby natychmiast włączył się, więc można zmienić tylko właściwość opacity. A ukrywając element (przełączając się na klasę ukrytą), chcemy opóźnić visibility:hiddendeklarację, abyśmy mogli najpierw zobaczyć przejście z zanikania. Robimy to, deklarując przejście we właściwości visibility z czasem trwania równym 0 s i opóźnieniem. Możesz zobaczyć szczegółowy artykuł tutaj .

Wiem, że jestem za późno, aby odpowiedzieć, ale zamieszczam tę odpowiedź, aby zaoszczędzić innym czas. Mam nadzieję, że ci to pomoże!

immayankmodi
źródło
10
Dobra odpowiedź, chcę dodać, display:noneaby wymazać pole po zakończeniu animacji „ukrywania”, jakiś pomysł?
Apolo,
1
Nie jestem pewien, czego tutaj potrzebujesz, ale możesz spróbować display:blockzamiast visibility: visiblew .visibleklasie, podobnie display:nonezamiast visibility: hiddenw .hiddenklasie z powyższego przykładu.
immayankmodi,
4
@MMTac To nie działa, ponieważ displaynie jest jedną z animowanych właściwości CSS . Zobacz Animowanie od „display: block” do „display: none” .
peterflynn
@MayankModi jaki jest sens pierwszych zer na widoczności efektu fadeOut? Rozumiem, że potrzebujesz tylko 2
Big Money,
1
@BigMoney to czas trwania i opóźnienie (na pewno możesz modyfikować te liczby zgodnie ze swoimi wymaganiami, te są używane tylko na przykład). Sprawdź, czy zaktualizowałem szczegóły, ponieważ ta odpowiedź jest nadal aktywna.
immayankmodi
13

Ponieważ displaynie jest jedną z animowanych właściwości CSS. Jedna display:noneanimacja zastępująca fadeOut czystymi animacjami CSS3, po prostu ustaw width:0i height:0na ostatniej klatce i użyj animation-fill-mode: forwardsdo zachowania width:0i height:0właściwości.

@-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
źródło
1
Przyjrzyj się animacjom o wysokiej wydajności . Należy unikać używania właściwości CSS, które wyzwalają zmianę układu widthi heightobie są wrażliwe.
Penny Liu
5

To jest działający kod dla twojego pytania.
Ciesz się kodowaniem ....

<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
źródło
Dołącz wyjaśnienie swojego rozwiązania: jak to działa? dlaczego różni się od innych już opublikowanych rozwiązań?
lifeisfoo
@lifeisfoo Próbowałem przede wszystkim z rozwiązaniami, ale to jest najprostszy i najłatwiejszy sposób na zrobienie tego i jeszcze jedna ważna rzecz, tekst zniknie automatycznie po kilku sekundach (10). Więc nie ma potrzeby klikania.
Vishal Biradar
3

Zapomniałeś dodać właściwość position do .dummy-wrapklasy, a wartości góra / lewo / dół / prawo nie mają zastosowania do elementów pozycjonowanych statycznie (ustawienie domyślne)

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

Jason Yaraghi
źródło
Dzięki, ale jak miałbym się całkowicie schować po przejściu?
Jest kilka sposobów - możesz po prostu zwiększyć topwartość, aby przesunęła się „poza” rzutnię, lub możesz użyć krycia dla animacji, aby
zniknęła
1
świetnie .. Rozumiem, ale jeszcze jedno pytanie, dlaczego ukryty div powraca i zanika?
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 tutaj.


źródło