如何使用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>

​

这是一个http://codepen.io/anon/pen/EjaRdg

我想要做的是:当单击div-1或div-2时，block和block2部分的相应动画应该来自于div-1或div-2的底部中心。它目前开始从左上角的动画。

我的问题是:如何使动画起源于底部中心 of 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();
  });

这是钢笔

用于定位的编辑：，您可以使用转换原点，就像有人指出的那样。但它只适用于规模、翻译等变换。

该块的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);
  }
} 

下面是更新的钢笔

改进区域:动态计算变换原点。

Answer 2

如果你想像你要求的那样玩你的动画的起点，你可以使用转换源CSS属性。写

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

从最下面的中心开始。

要使用反向动画，只需在动画指令之后添加关键字备用即可。它将播放完成后恢复的动画。

例子：

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