同时触发多个“过渡”

Question

有人知道如何从两个独立的组件播放过渡吗 同时具有相同的样式。

这是一个视频，它显示了我的问题。
https://youtu.be/WNu4Mdfn98U

重要的 CSS 部分

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

重要的 HMTL 部分

 <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}
/>

我的目标是一个元素慢慢显示描述，而另一个元素同时慢慢隐藏展开的描述。 但不知何故，尽管它们是同时触发的，但过渡是连续播放的。

谢谢你^^

Answer 1

其实你的动画是同时开始的，但是问题是你使用max-height的transition的值太高了，所以transition会从500px的高度开始到0px，但是您的内容高度甚至没有达到一半，所以看起来您的转换之间存在延迟

要解决此问题，您可以降低.Container_Active 的值以匹配您的实际描述高度，或者将其更改为height 而不是max-height，并具有您实际的平均高度说明

这里有一个简单的 sn-p，关于 max-height（浅蓝色）和 height（红色）之间的区别，这使您的过渡看起来像是延迟了，height / max-height 都设置为0 未打开时10em 打开时

$(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>