CSS 过渡和变换

Question

我目前正在开发一个需要 Windows 10 磁贴/块（如动画）的项目 (like this)。

每个图块/块具有以下结构。

<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的磁贴动画一样。）

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

如果有人能做到这一点，那对我有很大的帮助。

Answer 1

拼凑一个示例，说明如何在大约 15 分钟内基于 HTML 使用 jQuery 和 CSS 过渡来完成此任务。

如果您有任何问题，请告诉我！

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>