javascript - jQuery:CSS 动画不流畅

Question

我有一个简单的代码，其中 jQuery 以 2 秒的间隔在标题中隐藏和显示更改的内容。

添加 CSS 类时此脚本中的问题以及添加新类后的脚本。动画不流畅，我真的不知道有什么可以让它更流畅。

我用 CSS 和脚本尝试了很多东西，它仍在这样做。

编辑

我需要完成 CSS 动画。

setTimeout(function() {
   $('.top-slider').toggleClass('active');
     $('#slider-headline').on('transitionend webkitTransitionEnd', function() {
            $('.top-slider').removeClass('active');
            $("#slider-headline").text("Hello world!");
    });
}, 2000);

#slider-headline {
            text-transform: uppercase;
            font-size: 2.5em;
            padding: 0 8px;
            overflow: hidden;
            max-height: 1000px;
            transition: max-height 2s cubic-bezier(0, 1, 0, 1);
            position: relative;
            z-index: 2;
      background: #bada55
}

.top-slider.active #slider-headline {
    max-height: 0;
    transition: max-height 2s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="top-slider">
            <div class="content">
                <div class="slider-headline">
                    <h2 id="slider-headline">Web design</h2>
                </div>
            </div>
</section>

Answer 1

尝试从 .top-slider.active #slider-headline 开始过渡，并在 #slider-headline 上使用它。

setTimeout(function() {
   $('.top-slider').toggleClass('active');
   $('#slider-headline').on('transitionend webkitTransitionEnd', function() {
     $('.top-slider').removeClass('active');
     $("#slider-headline").text("Hello world!");
   });
}, 2000);

#slider-headline {
  text-transform: uppercase;
  font-size: 2.5em;
  padding: 0 8px;
  overflow: hidden;
  max-height: 600px;
  position: relative;
  z-index: 2;
  background: #bada55;
  transition: max-height 2s ease-in-out;
}

.top-slider.active #slider-headline {
  max-height: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="top-slider">
  <div class="content">
    <div class="slider-headline">
      <h2 id="slider-headline">Web design</h2>
    </div>
  </div>
</section>