Question

我正在尝试使div的宽度扩大，同时执行此操作时，我还希望其宽度左侧的div缩小到0px的宽度并消失。

这就是我的got to

我无法缩小第一个（左）div的宽度。我还需要第三个div（right）永远不要更改大小，不受动画的影响。

html

 <div id='container'>
      <div id='one'>one</div>
      <div id='two'>two</div>
      <div id='three'>three</div>
 </div>

css

#container {
  position: relative;
  border-style: dotted;
  height: 100px;
  width: 318px;
}

#one {
  border-style: dotted;
  border-color: red;
  left: 0;
  width: 200px;
  height: 100px;
  min-width: 0px;
  position: absolute;
}

#two {
  border-style: dotted;
  border-color: cadetblue;
  width: 0px;
  height: 100px;
  max-width: 200px;
  position: absolute;
  top: 0;
  right: 100px;
  animation: enter-right 20s linear infinite;
}
#three {
  border-style: dotted;
  border-color: goldenrod;
  width: 100px;
  right: 0;
  min-width: 100px;
  height: 100px;
  position: absolute;
}

@keyframes enter-right {
  0% {
    transform: translateX(0);
  }
  10%,
  90% {
    transform: translateX(0);
  }
  98%,
  100% {
    width: 100%;

  }
}

Answer 1

我使用了display：在容器上弯曲，并删除了元素的所有位置。我认为它可以满足您的需求：

.App {
  font-family: sans-serif;
  text-align: center;
}

#container {
  display: flex;
  border-style: dotted;
  height: 100px;
  width: 318px;
}

#one {
  border-style: dotted;
  border-color: red;
  width: 200px;
  height: 100px;
  min-width: 0px;
}

#two {
  border-style: dotted;
  border-color: cadetblue;
  width: 0px;
  height: 100px;
  max-width: 200px;
  animation: enter-right 20s linear infinite;
}

#three {
  border-style: dotted;
  border-color: goldenrod;
  width: 100px;
  min-width: 100px;
  height: 100px;
}

@keyframes enter-right {
  0% {
    transform: translateX(0);
  }
  10%,
  90% {
    transform: translateX(0);
  }
  98%,
  100% {
    width: 100%;
    /* transform: translateX(100%); */
  }
}

Answer 2

如果没有理由使用绝对位置，则可以尝试使用内联Flexbox容器，对第二个元素使用flex速记属性上的动画

main {
  display: inline-flex; }

main div {
  margin: 0 5px;
  box-sizing: border-box;
  overflow: hidden;
  border: 3px dashed #9bc;}

#one { 
  flex-basis: 200px; 
  width: 200px; }

#two { 
  flex: 1 0 0;
  animation: expand 5s linear 0s forwards; }

#three { 
  flex: 0 0 100px;
  width: 100px; }

@keyframes expand {
  100% { flex: 1 0 200px; }
}

<main>
  <div id="one">one</div>
  <div id="two">two</div>
  <div id="three">three</div>
</main>

扩展div的宽度以缩小另一个

2 个答案: