Animacja CSS3: wyświetlanie + krycie

Mam problem z animacją CSS3.

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

Ten kod działa tylko wtedy, gdy usunę zmianę display.

Chcę zmienić sposób wyświetlania tuż po najechaniu kursorem, ale krycie należy zmienić za pomocą przejścia.

Na podstawie odpowiedzi Michaelsa jest to rzeczywisty kod CSS, którego należy użyć

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

Możesz zrobić z animacjami CSS:

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

Jeśli to możliwe - użyj visibilityzamiastdisplay

Na przykład:

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

To obejście działa:

1. zdefiniuj „klatkę kluczową”:

   @-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. Użyj tej „klatki kluczowej” po „najechaniu”:

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

Wykorzystałem to, aby to osiągnąć. Blakną po zawisie, ale nie zajmują miejsca, gdy są ukryte, idealne!

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

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

Trochę się zmieniłem, ale efekt jest piękny.

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

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

Dziękuję wszystkim.

Jest jeszcze jedna dobra metoda, aby to zrobić, używając zdarzeń pointer:

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

Niestety nie jest to obsługiwane w IE10 i starszych.

Miałem ten sam problem. Próbowałem używać animacji zamiast przejść - jak sugerują @MichaelMullany i @Chris - ale działało to tylko w przeglądarkach webkit, nawet jeśli kopiowałem i wklejałem z prefiksami „-moz” i „-o”.

Udało mi się obejść problem, używając visibilityzamiast display. To działa dla mnie, ponieważ mój element podrzędny jest position: absolutetaki, więc nie ma to wpływu na przepływ dokumentów. Może zadziałać również dla innych.

Tak wyglądałby oryginalny kod przy użyciu mojego rozwiązania:

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

Jeśli wyzwalasz zmianę za pomocą JS, powiedzmy po kliknięciu, istnieje fajne obejście.

Widzisz, że problem występuje, ponieważ animacja jest ignorowana podczas wyświetlania: żaden element, ale przeglądarka nie stosuje wszystkich zmian naraz, a element nigdy nie jest wyświetlany: blok, gdy nie jest animowany w tym samym czasie.

Sztuczka polega na poproszeniu przeglądarki o wyrenderowanie ramki po zmianie widoczności, ale przed uruchomieniem animacji.

Oto przykład JQuery:

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

W przypadku elementów bezwzględnych lub stałych możesz również użyć indeksu z:

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

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

Inne elementy powinny teraz mieć indeks z między -100 a 100.

Wiem, że to naprawdę nie jest rozwiązanie na twoje pytanie, ponieważ o to prosisz

wyświetlanie + krycie

Moje podejście rozwiązuje bardziej ogólne pytanie, ale być może był to problem tła, który należy rozwiązać, używając displayw połączeniu zopacity .

Moim pragnieniem było usunięcie elementu z drogi, gdy nie jest widoczny. To rozwiązanie robi dokładnie to: przenosi element z daleka i można go użyć do przejścia:

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

Ten kod nie zawiera żadnych przedrostków przeglądarek ani hacków dotyczących wstecznej zgodności. Po prostu ilustruje koncepcję, w jaki sposób element jest odsunięty, ponieważ nie jest już potrzebny.

Ciekawą częścią są dwie różne definicje przejść. Gdy wskaźnik myszy najedzie na .parentelement, .childelement należy natychmiast umieścić na miejscu, a wtedy krycie zostanie zmienione:

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

Gdy nie ma najechania kursorem lub wskaźnik myszy został odsunięty od elementu, należy poczekać, aż zakończy się zmiana krycia, zanim element będzie można przenieść poza ekran:

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

Przeniesienie obiektu będzie realną alternatywą w przypadku, gdy ustawienie display:nonenie zakłóci układu.

Mam nadzieję, że trafiłem w sedno za to pytanie, chociaż nie odpowiedziałem.

Jedną z rzeczy, które zrobiłem, było ustawienie marginesu stanu początkowego na coś w rodzaju „margin-left: -9999px”, aby nie pojawiał się na ekranie, a następnie zresetowanie „margin-left: 0” w stanie najechania. W takim przypadku zachowaj „display: block”. Zrobił mi sztuczkę :)

Edycja: zapisać stan i nie wracać do poprzedniego stanu najechania? OK, potrzebujemy 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>

Aby mieć animację w obie strony w trybie HoverIn / Out, zrobiłem to rozwiązanie. Mam nadzieję, że komuś to pomoże

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

JAK ANIMOWAĆ NIEPRZEZROCZYSTOŚĆ ZA POMOCĄ CSS:
to jest mój kod:
kod CSS

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

lub sprawdź ten plik demonstracyjny

function głos () {
var głosowanie = getElementById ("yourOpinion")
if (this.workWithYou):
vote + = 1};
lol

display:nie podlega zmianie. Prawdopodobnie będziesz musiał użyć jQuery, aby zrobić to, co chcesz.