CSS Tranisitions and Transforms

Question

我目前正在从事一个需要Windows 10 Tiles/block(如Animation(的项目(如此(。

每个瓷砖/块都有以下结构。

<div class="wrapper">
   <div class="block-1">
      <p>some text</p>
   </div>
   <div class="block-2">
      <p>some other text</p>
   </div>
</div>

我想实现一个动画，以便block-1最初应覆盖wrapper的整个空间。10秒后，block-2应从wrapper的底部滑落，然后将block-1从wrapper中推出。在10秒钟的间隙之后，block-1应该从wrapper的顶部滑动，然后将block-2从wrapper下推出。这应该每10秒进行一次。

在动画期间，块不应相互重叠，而应在占用wrapper时互相推动。(就像Windows 10 Tile Animation一样。(

动画应该具有整洁的过渡。我尝试使用CSS变换，但无法完美实现。

如果有人能够实现这一目标，那将对我有很大帮助。

Answer 1

使用jQuery和CSS过渡，将您如何根据HTML在大约15分钟内完成此操作的示例。

让我知道您是否有任何疑问！

function slide() {
  var transitionPause = 3000;
  setTimeout(function() {
    $('.wrapper').each(function() {
      $(this).find('.slider').toggleClass('active');
      slide();
    });
  }, transitionPause);
}
slide();

.wrapper {
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.slider {
  height: 200%;
  transition: transform 1s;
}
.slider.active {
  transform: translateY(-50%);
}
.block {
  height: 50%;
}
/* styles unrelated to the animation: */
.block-1 { background: pink; }
.block-2 { background: teal; }
p {
  color: white;
  margin: 0;
  padding: 1em;
  font-family: sans-serif;
}
body {
  background: #333;
}

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