CODEWITHSUNDEEP
javascripthtmlcssreactjscss-animations
Geo
Geo

Reputation: 2681

Expanding div's width to shrink anothers

I am trying to make a div's width expand, when doing this I also want the div to the left of its width to shrink to a width 0px and disappear.

This is what I have got to

I can't get the first(left) div's width to shrink. I also need the third div(right) to never change size, being unaffected by the animation.

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%;

  }
}

Upvotes: 2

Views: 572

Answers (2)

Joe Fitzsimmons
Joe Fitzsimmons

Reputation: 1063

I used display: flex on the container and removed all positioning from elements. I think it does what you're wanting:

.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%); */
  }
}

Upvotes: 2

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

If there is no reason to use an absolute position, you could try with an inline Flexbox container, using an animation over the flex shorthand property for the second element

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>

Upvotes: 0

Related Questions