jquery - 如何使用css3为div设置动画

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 的底部中心。它目前从左 Angular 开始动画。

我的问题是:如何让动画起源于 div-1 或 div-2 的bottom center 而不是左 Angular 。此外，当单击 div-1 或 div-2 时，当前打开的部分应该关闭(带有打开方式的反向动画)和相应的单击 div 应作为新动画打开。这如何通过脚本来完成？我不想使用外部库 (animate.css)。我已经尝试了几种方法来解决这个问题，但我不知道该怎么做，因为我无法理解逻辑。

Answer 1

如果你想像你所要求的那样调整动画的起点，你可以使用 transform-origin CSS 属性。 写

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

让它从底部中心开始。

要使用反转动画，只需在动画指令后添加关键字alternate。完成后会播放还原的动画。

例子:

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