css3 Transition transform пусть пустое пространство между элементами - PullRequest
Новая
       7

css3 Transition transform пусть пустое пространство между элементами

0 голосов
/ 09 января 2019

У меня есть анимация между 2 дел. В идеале, я хочу, чтобы «толкали» друг друга, чтобы он чувствовал себя так, будто это 3D-окно, вращающееся на Z.

У меня есть 

body {
  overflow:hidden
}

div {
  position:absolute;
  display:inline-block;
  margin:0;
}

div:first-child {
  left:0;
  width:100%;
  height:100%;
  background-color:#453525;
  transform:scaleX(1);
  transition:transform .8s ease-out, width .8s ease-in, left .8s ease-in;
}
div:nth-child(2) {
  left:101%;
  width:0;
  height:100%;
  background-color:#754512;
  transform:scaleX(0);
  transition:transform .8s ease-out, width .8s ease-in, left .8s ease-in;
}

body:hover div:first-child {
  transform:scaleX(0);
  width:0;
  left:-101%;
}

body:hover div:nth-child(2) {
  transform:scaleX(1); 
  width:100%;
  left:0;
}
<div>
</div>
<div>
</div>

Как видите, между моими дивами огромное пространство. Я попытался уменьшить продолжительность перехода первого деления, чтобы второй был ближе, но независимо от того, что у меня все еще есть пробел.

Вот скрипка для игры с

Есть идеи?

РЕДАКТИРОВАТЬ: Div в моем проекте содержит материал, поэтому, когда он масштабируется вверх или вниз, похоже, что он вращается, поэтому я не использую простой переход по ширине или влево в одиночку

1 Ответ

0 голосов
/ 09 января 2019

Я думаю, что вы можете избавиться от левого перехода и настроить источник преобразования так, чтобы оба div оставались связанными: 

body {
  overflow:hidden;
  margin:0;
  height:100vh;
}

div {
  position:absolute;
  display:inline-block;
  margin:0;
}

div:first-child {
  left:0;
  width:100%;
  height:100%;
  background-color:#453525;
  transform:scaleX(1);
  transform-origin:right;
  transition:transform .8s ease-out, width .8s ease-in;
}
div:nth-child(2) {
  right:0;
  width:0;
  height:100%;
  background-color:#754512;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .8s ease-out, width .8s ease-in;
}

body:hover div:first-child {
  transform:scaleX(0);
  width:0;
}

body:hover div:nth-child(2) {
  transform:scaleX(1); 
  width:100%;
}
<div>
</div>
<div>
</div>
...