Jak animować div użyciem CSS3

Question

Mam następujący kod:

$('.div-1').on('click', function() { 
 
    $('.block').addClass('animated'); 
 
}); 
 
$('.div-2').on('click', function() { 
 
    $('.block2').addClass('animated'); 
 
});

html, 
 
body { 
 
    height: 100%; 
 
} 
 
.div-1 { 
 
    display: inline-block; 
 
    padding: 40px; 
 
    background: tomato; 
 
} 
 
.div-2 { 
 
    display: inline-block; 
 
    padding: 40px; 
 
    background: tan; 
 
} 
 
.block2 { 
 
    background: green; 
 
} 
 
.animated { 
 
    -webkit-animation: animateThis 0.2s ease; 
 
    animation: animateThis 0.2s ease; 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation-fill-mode: forwards; 
 
} 
 
.block { 
 
    background: red; 
 
} 
 
@-webkit-keyframes animateThis { 
 
    0% { 
 
    height: 0; 
 
    width: 0; 
 
    } 
 
    100% { 
 
    height: 100%; 
 
    width: 100%; 
 
    } 
 
} 
 
keyframes animateThis { 
 
    0% { 
 
    height: 0; 
 
    width: 0; 
 
    } 
 
    100% { 
 
    height: 100%; 
 
    width: 100%; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div-1"></div> 
 
<div class="div-2"></div> 
 

 
<section class="block"></section> 
 
<section class="block2"></section>

Oto PEN

Próbuję robić: po kliknięciu div-1 lub div-2 odpowiednią animację dla sekcji block i block2 powinien pochodzić z centrum dolnego z centrum z div-1 lub div-2. Aktualnie rozpoczyna animowanie od lewego rogu .

Moje pytanie brzmi: w jaki sposób mogę uzyskać animacji pochodzą z dolnej środkowej z div-1 lub div-2 a nie lewym rogu. Ponadto po kliknięciu na div-1 lub div-2 otwarta sekcja powinna zostać zamknięta (z odwróconą animacją sposobu jej otwierania), a kliknięty przycisk div powinien zostać otwarty jako nowa animacja. Jak to zrobić za pomocą skryptów? Nie chcę używać zewnętrznych bibliotek (animate.css). Próbowałem kilku podejść do tego, ale nie mam pojęcia, jak to zrobić, ponieważ nie potrafię wypracować logiki.

Answer 1

Użyj osobnego animację ukryć bloki

@-webkit-keyframes shrinkThis { 
     0% { 
     height: 100%; 
     width: 100%; 
    } 

    100% { 
    height: 0; 
    width: 0; 
    } 
} 

i można korzystać z połączenia z powrotem wiedzieć, że blok jest ukryty, a następnie rozwiń odpowiedni blok

$(".block").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", 
    function() { 
     $('.block2').removeClass('shrink'); 
     $('.block2').addClass('expand'); 
     $('.block2').unbind(); 
    }); 

Oto PEN

Edit do pozycjonowania: Można użyć przekształcić pochodzenia jak wskazano przez kogoś. Ale będzie działać tylko z przekształceniami takimi jak skala, tłumaczyć itp.

css bloku powinno być coś jak następuje:

.block { 
    /*background: red;*/ 
    position:absolute; 
    border:solid 1px; 
    height: 100%; 
    width: 100%; 
    transform-origin: 20px 0%; 
-webkit-transform-origin: 20px 0%; 
} 

transformaty jest za pomocą skali zamiast modyfikowania wysokości i szerokości:

@-webkit-keyframes animateThis { 
    0% { 
    -webkit-transform: scale(0.1,0.1); 
    } 
    100% { 
    -webkit-transform: scale(1,1); 
    } 
} 

Oto aktualizowane PEN

Obszar do poprawy: Początek transformacji powinien być obliczany dynamicznie.

Answer 2

Jeśli chcesz odtwarzać z punktem początkowym animacji tak, jak prosiłeś, możesz użyć właściwości CSS typu transformacja. Napisz

transform-origin: 50% 100%; 
-webkit-transform-origin: 50% 100%; 

, aby rozpocząć od dolnego środka.

Aby użyć odwróconej animacji, po słowie kluczowym dodaj po prostu słowo kluczowe alternatywnie. Odtwarzanie animacji zostanie przywrócone po zakończeniu.

Exampe:

.animated { 
    -webkit-animation: animateThis 0.2s ease alternate; 
    animation: animateThis 0.2s ease alternate; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
}