Trigger multipe 'transitions' at the same time

Question

Does anybody know how to play transitions from two separate Components with the same styling at the same time.

Here is a video, which shows my problem.
https://youtu.be/WNu4Mdfn98U

Important CSS Parts

.Container_Active .Description {
  max-height: 500px;
  margin-top: 5px;
  color: var(--ifm-color-on-primary);
  transition: max-height 1000ms ease-in; /* Transiation 1 */
}

.Description {
  max-height: 0;
  margin: 0;
  font-size: var(--ifm-font-size-18);
  overflow: hidden;
  transition: max-height 1000ms ease-out; /* Transiation 2 */
}

Important HMTL Parts

 <div
      className={clsx(styles.Container, {
        [styles.Container_Active]: active,
      })}
     >
</div>

 <SectionRightItem
    key={i}
    title={section.title}
    description={section.description}
    onClick={() => {
      setIndex(i);
    }}
    icon={section.icon}
    active={index === i}
/>

My goal is that the one element slowly shows the description and the other element slowly hides the expanded description at the same time. But somehow the transitions are played in a row, although they are triggered at the same time.

Thank you ^^

Answer 1

Actually your animation is starting at the same time, but the problem is that you use the transition of max-height with a value that's too high, so the transition will start from the height of 500px to 0px, but your content height doesn't even reach half of it, so it appears like there's a delay between your transition

To resolve the problem, you can lower the value of .Container_Active to match your actual description height, or change it to height rather than max-height with an average height of your actual description

Here's a simple snippet about the difference between max-height (light blue) and height (red) for the transition which makes your transition looks like it's delayed, both height / max-height is set to 0 when not opened and 10em when opened

$(function() {
  setInterval(function() {
    $('div').toggleClass('open');
  }, 1500);
});

div {
  position: absolute;
}

#front {
  max-height: 0;
  overflow: hidden;
  background: lightblue;
  transition: max-height 1000ms ease-in-out;
  padding-left: 3em;
}

#front.open {
  max-height: 10em;
  transition: max-height 1000ms ease-in-out;
}

#back {
  height: 0;
  background: red;
  transition: height 1000ms ease-in-out;
  opacity: .75;
}

#back.open {
  height: 10em;
  transition: height 1000ms ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='front' class='open'>
Hello World Welcome<br/>World</br>Welcome
</div>
<div id='back' class='open'>
BACK
</div>