CSS 过渡和变换

Question

我目前正在做一个需要 Windows 10 tiles/blocks 像动画 (like this) 的项目。

每个 tile/block 具有以下结构。

<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 的整个 space。 10 秒后，block-2 应从 wrapper 底部滑出，并将 block-1 推出 wrapper。再次间隔 10 秒后，block-1 应从 wrapper 顶部滑出并将 block-2 推出 wrapper。这应该每 10 秒进行一次。

在动画过程中，方块不应该相互重叠，而是在占据wrapper的同时相互推动。（就像Windows10块动画一样。）

动画应该有一个整齐的过渡。我尝试使用 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>

CSS 过渡和变换

CSS Tranisitions and Transforms

css

jquery

css-transitions

css-transforms

css-animations