Come animare un div con CSS3

Question

Ho seguente codice:

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

Ecco un PEN

Quello che sto cercando di fare: quando si fa clic su div-1 o div-2 l'animazione corrispondente per le sezioni block e block2 dovrebbe provenire dal centro in basso di div-1 o div-2. Al momento inizia l'animazione dall'angolo a sinistra.

La mia domanda è: come ottengo l'animazione provenire dalla centrale inferiore di div-1 o div-2 e non il sinistra. Inoltre, quando si fa clic su div-1 o div-2, la sezione attualmente aperta deve essere chiusa (con l'animazione inversa di come viene aperta) e il corrispondente clic su div deve essere aperto come nuova animazione. Come può essere fatto attraverso lo scripting? Non voglio usare librerie esterne (animate.css). Ho provato diversi approcci a questo, ma non ho idea di come farlo in quanto non riesco a elaborare la logica.

Answer 1

Utilizzare un'animazione separata per nascondere i blocchi

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

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

e si può utilizzare una chiamata indietro per sapere che il blocco è nascosto e quindi espandere il blocco corrispondente

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

Ecco lo PEN

Edit per il posizionamento: È possibile utilizzare trasformare origine come sottolineato da qualcuno. Ma funzionerà solo con trasformazioni come la scala, la traduzione ecc.

css del blocco dovrebbe essere qualcosa del tipo seguente:

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

La trasformazione sta usando scala invece di modificare altezza e larghezza:

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

Qui è la versione aggiornata di PEN

Area da migliorare: l'origine della trasformazione deve essere calcolata in modo dinamico.

Answer 2

Se si desidera giocare con il punto di partenza dell'animazione come richiesto, è possibile utilizzare la proprietà CSS di origine trasformazione. Scrivi

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

per renderlo parte dal basso al centro.

E per utilizzare l'animazione invertita, è sufficiente aggiungere la parola chiave alternata a dopo le direttive di animazione. Riprodurrà l'animazione ripristinata dopo essere stata completata.

exampe:

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