Как анимировать DIV с помощью CSS3

Question

Я следующий код:

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

Вот является PEN

То, что я пытаюсь сделать: при нажатии на div-1 или div-2 соответствующая анимация для разделов block и block2 должен происходить от нижнего центра от div-1 или div-2. В настоящее время он начинает анимацию с левого угла .

Мой вопрос: как я могу получить анимацию происходят из нижнего центраиз div-1 или div-2 и не левого угла. Кроме того, при нажатии на div-1 или div-2 открываемый в настоящий момент раздел должен закрываться (с обратной анимацией, как он открывается), и соответствующий щелчок div должен открыться в виде новой анимации. Как это можно сделать с помощью скриптов? Я не хочу использовать внешние библиотеки (animate.css). Я пробовал несколько подходов к этому, но я понятия не имею, как это сделать, поскольку я не могу выработать логику.

Answer 1

Используйте отдельную анимацию, чтобы скрыть блоки

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

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

И вы можете использовать обратный вызов, чтобы узнать, что блок скрыт и затем разверните соответствующий блок

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

PEN

Edit для позиционирования: Вы можете использовать преобразовании координат как было указано кем-то. Но он будет работать только с преобразованиями, такими как масштабирование, перевод и т. Д.

CSS блока должно быть что-то вроде следующего:

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

Преобразование использует шкалу вместо изменения высоты и ширины:

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

Вот обновленный PEN

Область для улучшения: происхождение преобразования должно рассчитываться динамически.

Answer 2

Если вы хотите поиграть со стартовой точкой своей анимации, как вы просили, вы можете использовать свойство CSS трансформации. Написать

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

сделать это начиная с нижнего центра.

И, чтобы использовать обратную анимацию, просто добавьте ключевое слово alternate после ваших анимационных директив. Он будет воспроизводить анимацию, возвращенную после завершения.

Exampe:

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