Chcę dodać wyświetlacz: brak nieruchomości do końca animacji klatek kluczowych. Jak więc:

.sw_intro{
    animation: introtop;
    animation-duration: 0.8s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

@keyframes introtop {
    0% {margin-top: 0;display: block;}
    100%{display: none;margin-top: 100vh;}
}

Ale wyświetlacz: nieruchomość Brak nie jest używana. Zakładam, że nie jest błędem mojego "kodu", ale coś, co nie jest dozwolone / wykonalne. Chociaż chciałbym mieć ten wpływ na koniec animacji i musi być coś w rodzaju wyświetlania: żaden działanie, nie jest nieprzezroczystość: 0;

Jak mogę to zrobić / osiągnąć? Zamiast tego z jQuery?

Dzięki!

2
Daiaiai 16 luty 2017, 18:48

2 odpowiedzi

Najlepsza odpowiedź

display nie jest nieruchomością, która będzie działać z animacją. Zamiast tego możesz zmienić wymiary (height lub width) do 0 i ustaw overflow:hidden; do elementu. W ten sposób należy skutecznie brakować elementu.

.sw_intro{
    display:block;
    overflow:hidden;
    animation: introtop;
    animation-duration: 0.8s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

@keyframes introtop {
    0% {margin-top: 0; width:inherit; height:inherit;}
    100%{margin-top: 100vh; width:0; height:0;}
}
4
Donnie D'Amato 16 luty 2017, 15:53

Z jQuery:

Twoje początkowe CSS:

 .sw_intro {
    display:block;
    margin-top: 0;
    width: inherit;
    height: inherit;
    opacity: 1;
}

Twoje jQuery:

$( ".sw_intro" ).animate({
    marginTop: "100vh",
    opacity: 0
}, 800, function() {
    // Animation complete.
    $('.sw_intro').hide();
});
1
Keyvan 16 luty 2017, 16:08