Question

我不确定这是否真的可以解决/可能但是......

我试图实现一个特定的动画，我的屏幕在第一页上垂直划分为2，但在做了某种事件（滚轮，滚动，点击等）之后，布局会平滑地动画显示水平划分屏幕。

如果将鼠标悬停在第一个示例上，我会尝试旋转两个内部元素，然后尝试根据新的旋转位置调整元素的大小。这不行。

如您所见，随着元素的旋转，存在以下几个问题：

他们不能完全同步旋转
你可以看到它旋转后的容器的丑陋空白
旋转后，元素不能完全填满容器

我尝试了许多不同的东西，比如使用z-index，绝对定位，尝试将内部元素放在另一个嵌套容器中，然后旋转容器，然后添加高度和宽度，但同样尺寸也不合适容器。我似乎无法弄清楚如何使这项工作（如果可能的话，没有Javscript）。

基本上，我想到的动画将无缝地从初始阶段过渡到最终阶段（即，您将无法看到容器背景中的空白，以及起始垂直分离线只会慢慢旋转到水平线，同时改变内部元素的位置

我希望这有道理吗？我一直在尝试让这个动画工作好几天......我已经筋疲力尽了选择/没有足够的创造力/没有我需要的知识;非常感谢帮助。

＆＃13;

.container {
  display: flex;
  border: 1px solid black;
  width: 425px;
  height: 500px;
  margin: 5% auto;
 
}

.container:hover .left {
  transform-origin: 100% 50%;
  transform: rotate(90deg);
  width: 100%;
}
.container:hover .right {
  transform-origin: 0 50%;
  transform: rotate(90deg);
  width: 100%;
}

.left {
  background-color: purple;
  height: 100%;
  width: 50%;
  transition: all 2s;

}

.right {
  background-color: yellow;
  height: 100%;
  width: 50%; 
  transition: all 2s;
}

  
.container2 {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  width: 425px;
  height: 500px;
  margin: 5% auto;
}


.left2 {
  background-color: purple;
  height: 50%;
  width: 100%;
}

.right2 {
  background-color: yellow;
  height: 50%;
  width: 100%; 
}

＆＃13;

Initial Stage
<p>(width of the container is the viewport; I don't care about if the element extends outside of the viewport during the transtion, but at the final stage, the element must be within it's container perfectly)</p>
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

Final Stage
<p>(width of the container is the viewport; I don't care about if the element extends outside of the viewport during the transtion, but at the final stage, the element must be within it's container perfectly)</p>
<div class="container2">
  <div class="left2">
    I have content in here that I need fit within this container
  </div>
  <div class="right2">
    I have content in here that I need fit within this container
  </div>
</div>

＆＃13;

Answer 1

不是向左/右div添加过渡，而是将其添加到容器div

 .container {
  display: flex;
  border: 1px solid black;
  width: 425px;
  height: 500px;
  margin: 5% auto;
   transition: all 2s;
   transform: rotate(0deg);

}
.container:hover { 
  transform: rotate(90deg);
  width: 100%;
}

同时从左右div中删除过渡和变换

使用变换和元素定位/大小

1 个答案: