Javascript jQuery:CSS动画不是平滑的

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

这个脚本中的问题是在添加CSS类时出现的，然后再添加一个新类。动画不是平滑的，我真的不知道什么可以使它更平滑

我用CSS和脚本做了很多尝试，但它仍然在这样做

编辑

我需要与CSS动画完成

setTimeout（函数（）{
$（'.top slider'）.toggleClass（'active'）；
$（“#滑块标题”）。在（'transitionend WebKittTransitionEnd'，function（）上{
$（'.top slider'）。removeClass（'active'）；
$（“#滑块标题”）.text（“你好，世界！”）；
});
}, 2000);
#滑块标题{
文本转换：大写；
字号：2.5em；
填充：0 8px；
溢出：隐藏；
最大高度：1000px；
过渡：最大高度2s立方贝塞尔（0,1,0,1）；
位置：相对位置；
z指数：2；
背景：#bada55
}
.top-slider.active#滑块标题{
最大高度：0；
过渡：最大高度2秒，易于进出；
}

网页设计
jQuery有一种内置的上下滑动元素的方式：

setTimeout(function() {

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

}, 2000);

这会将元素向上滑动，更改文本，然后将其放在两侧。您需要从css中删除最大高度和过渡。
尝试从
.top-slider.active#slider headline
放置过渡，并在
#slider headline
上使用


setTimeout（函数（）{
$（'.top slider'）.toggleClass（'active'）；
$（“#滑块标题”）。在（'transitionend WebKittTransitionEnd'，function（）上{
$（'.top slider'）。removeClass（'active'）；
$（“#滑块标题”）.text（“你好，世界！”）；
});
}, 2000);
#滑块标题{
文本转换：大写；
字号：2.5em；
填充：0 8px；
溢出：隐藏；
最大高度：600px；
位置：相对位置；
z指数：2；
背景：#bada55；
过渡：最大高度2秒，易于进出；
}
.top-slider.active#滑块标题{
最大高度：0；
}

网页设计

这里的主要问题是
立方贝塞尔函数。它将提供从开始到结束变速的过渡效果。更改为
立方贝塞尔（1,1,0.8,1）
并将转换速度的秒数增加到3s

在第二个css规则中，您不需要另一个过渡效果


setTimeout（函数（）{
$（'.top slider'）.toggleClass（'active'）；
$（“#滑块标题”）。在（'transitionend WebKittTransitionEnd'，function（）上{
$（'.top slider'）。removeClass（'active'）；
$（“#滑块标题”）.text（“你好，世界！”）；
});
}, 500);
#滑块标题{
文本转换：大写；
字号：2.5em；
填充：0 8px；
溢出：隐藏；
最大高度：1000px；
位置：相对位置；
z指数：2；
背景：#bada55；
过渡：最大高度3s立方贝塞尔（1,1,0.8,1）；
}
.top-slider.active#滑块标题{
最大高度：0；
}

网页设计
您可以使用jQuery
fadeIn
和
fadeOut
功能制作平滑动画（fadeIn&fadeOut）


$（'.top slider'）.fadeOut（2000，（）=>{
$（“#滑块标题”）.text（'Hello World'）
$（'.top slider'）.fadeIn（'slow'））
})
#滑块标题{
文本转换：大写；
字号：2.5em；
填充：0 8px；
溢出：隐藏；
最大高度：1000px；
过渡：最大高度2s立方贝塞尔（0,1,0,1）；
位置：相对；z指数：2；背景：#bada55
}

网页设计
对不起，我忘了提到我需要使用CSS动画。问题是最大高度：1000px。转换需要2秒，但其速度就好像它正在动画化到那个高度一样