CSS преобразования и преобразования

В настоящее время я работаю над проектом, которому нужны плитки / блоки Windows 10, такие как анимация (как это).

Каждый тайл / блок имеет следующую структуру.

<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 Transforms, но не смог добиться этого идеально.

Если бы кто-то смог этого добиться, это было бы мне очень полезно.

jquery css css-transitions css-animations css-transforms

30.03.2018 20:32

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Собрал воедино пример того, как это можно сделать на основе HTML примерно за 15 минут, используя переходы 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>

Большое спасибо @Jon Uleis. Я забыл упомянуть одну вещь: Блок 2 должен скользить снизу, а Блок 1 должен скользить сверху.

— 30.03.2018 21:07

@VinodhK Попался - это на самом деле проще. Я изменил свою демонстрацию, чтобы иметь эту функциональность.

— 30.03.2018 21:40

Еще раз спасибо за быстрый ответ! Это именно то, что я хотел. Спасибо @Jon Uleis

— 30.03.2018 22:02

30.03.2018 20:56