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>

- Matúš Rebroš

---

问题在于max-height: 1000px。过渡需要2秒钟，但速度就像是动画到那个高度一样。 - dantheman

尝试使用jQuery UI进行平滑过渡，而不是jQuery。@matúš-rebroš - Shareque

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>

- justDan

Answer 2

• 这里的主要问题在于函数。它将提供一个从开始到结束速度可变的过渡效果。将其更改为，并将过渡速度的秒数增加到3秒。
• 在第二个CSS规则中，您不需要另一个过渡效果。

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

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

.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>

- Sivakumar Tadisetti

Answer 3

你可以使用jQuery的fadeIn和fadeOut函数来实现平滑动画效果。

$('.top-slider').fadeOut(2000, () => {
  $('#slider-headline').text('Hello World')
  $('.top-slider').fadeIn('slow')
})

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

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

- Robin

Answer 4

jQuery内置了一种滑动元素的方法：

setTimeout(function() {

    $('.top-slider').slideUp(500, function() {
        $("#slider-headline").text("Hello world!");
        $('.top-slider').slideDown(500)
    });

}, 2000);

这会将元素向上滑动，更改文本，然后向下滑动。您需要从CSS中删除max-height和transition。

- dantheman

---

抱歉，我忘了提到我需要完成CSS动画。 - Matúš Rebroš