Question

请参阅此jsfiddle：https://jsfiddle.net/b53te5qb/1/

我试图使每个div宽度过渡到另一个。

现在它是即时效果，但我希望它顺利过渡。当我尝试过渡时，它开始出现错误。

这是HTML：

<div class="outer">
    <div class="color left"></div>
    <div class="color right"></div>
</div>

到目前为止这是CSS：

.outer {
    position: relative;
    height: 100px;
    width: 200px;
}

.color {
    height: 50px;
    width: 50%;
    float: left;
    transition: width 0.3s linear;
    -webkit-transition: width 0.3s linear;
}

.color:hover {
    width: 100%;
    position: absolute;
}

.left {
    background-color: #ff0;
}

.right {
    background-color: #0ff;
}

我愿意重组这个，但我需要完成任务。我刚刚提供了这个作为基础的例子。

Answer 1

如果你只是用纯色做这件事，我会转换transform: scaleX()。将transition与transform一起使用可以提高性能。

.outer {
    position: relative;
    height: 100px;
    width: 200px;
}

.color {
    height: 50px;
    width: 50%;
    float: left;
    transition: transform 0.3s linear;
    -webkit-transition: transform 0.3s linear;
    transform-origin: 0 0;
}

.color:hover {
    transform: scaleX(2);
}

.left {
    background-color: #ff0;
}

.right {
    background-color: #0ff;
    transform-origin: 100% 0;
}

<div class="outer">
    <div class="color left"></div>
    <div class="color right"></div>
</div>

Answer 2

你需要绝对放置它们以避免它们移动。

https://jsfiddle.net/b53te5qb/6/

我强烈建议不要过渡宽度，更好的是过渡transform: translateX()，因为它会加速硬件并且更顺畅：https://jsfiddle.net/b53te5qb/8/。

它仍然需要抛光，但这个想法就在那里。（注意overflow: hidden以避免显示多余的。）另一个改进是在顶部有两个元素（50％/ 50％宽度）通过javascript触发悬停，因为当元素移动时很难保持将鼠标悬停在它们上，或移除悬停而不离开.outer组件。

希望它有所帮助。

Answer 3

在这里：https://jsfiddle.net/prowseed/b53te5qb/10/

两种技术，一种使用flexbox，另一种使用绝对位置，选择任何一种技术：）

.outer {
    position: relative;
    height: 100px;
    width: 666px;
    display:flex;
}

.color {
    flex: 1;
    height: 100%;
    transition: .3s;
}

.color:hover {
    flex-basis:100%;
}

.outer2 {
  margin-top:100px;
  position: relative;
  height: 100px;
  width: 666px;
}

.outer2:hover .color {
  width:0;
}

.outer2 .color {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:50%;
  }

  .outer2 .color + .color {
    left:auto;
    right:0;
  }

  .outer2 .color:hover {
    width:100%;
    z-index:2;
  }

在div上向左转换div宽度，反之亦然

3 个答案: