Question

我想使用关键帧动画来扩大一个div的宽度，同时使其缩小另一个div的宽度，同时还要将内容从缩小的容器中推出，以使其消失。

这是我必须去的地方：https://codesandbox.io/embed/box-push-s6b6v

我必须更改div的宽度，但是其中的内容永远不会消失。我希望将内部元素推到左侧，而不仅仅是重叠。就像它们被推到屏幕上一样，消失了。

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

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

#columns {
  column-width: 50px;
  column-gap: 5px;
  column-count: 3;
  width: 200px;
}

#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: lightcoral;
  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%); */
  }
}

 <div id="container">
        <div id="one">
          <div id="columns">cat dog snake</div>
        </div>
        <div id="two">
          <div id="columns">cat dog snake</div>
        </div>
        <div id="three">three</div>
      </div>

我希望我想做的事有意义。

Answer 1

这是因为ID为#columns的第一个div设置为display: block;。添加以下内容以解决此问题：

#one #columns{
   display: inline;
}

并为#two添加背景色：

#two {
  background-color: white;
}

额外： 如果您添加

#three {
  background-color: white;
  z-index:20;
}

文本看起来好像不是随机出现的

动画将div的宽度缩小

1 个答案: