同时触发多个'transitions'

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 的过渡值太高了，所以过渡将从 [=14= 的高度开始] 到 0px，但是你的内容高度甚至没有达到它的一半，所以看起来你的转换之间有延迟

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

这里有一个关于 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>

同时触发多个'transitions'

Trigger multipe 'transitions' at the same time

html

css

css-transitions

css-animations

reactjs