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>

Answer 2

这里的主要问题是SELECT DISTINCT priceindex, price, pricedate, count(pricedate) AS counta FROM myDB WHERE pricedate BETWEEN date_trunc('month',pricedate) and pricedate + interval '1 day'函数。从开始到结束，它将以可变的速度提供过渡效果。更改为cubic-bezier，并增加了秒数，以将转换速度更改为3s
并且在第二个CSS规则中不需要其他过渡效果。

cubic-bezier(1, 1, 0.8, 1)

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

Answer 3

jQuery具有内置的上下滑动元素的方式：

setTimeout(function() {

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

}, 2000);

这会将元素向上滑动，更改文本，然后将其侧面向下。您需要从CSS中删除最大高度和过渡。

Answer 4

您可以使用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>

jQuery：CSS动画不流畅

4 个答案: