在具有各种高度的滑块之后转换内容更改位置

Question

我有一个滑块，各种高度的幻灯片。作为副作用，滑块div之后的内容将跳过＆＃34;跳跃＆＃34;每次幻灯片更改都会上下。 这是我的问题：当滑块改变高度时，如何在滑块平滑移动到位后实现内容？我玩过CSS过渡属性，但无济于事。

为了说明我的目标，这里有一个指向Apple网页之一的链接：http://www.apple.com/tvos/

Answer 1

基本上，你有这个布局：

<slider></slider>
<rest-of-content></rest-of-content>

虽然实际上<rest-of-content>高度更改时页面中<slider>的位置发生了变化，但 nothing 可以更改在<rest-of-content>使其顺利跳跃。您需要使height <slider>属性顺利更改，并且DOM中的所有其他内容也会自动更改位置。

根据您使用的滑块，动画滑块的height属性会有很大差异，但是很多动画可以平滑地动画更改高度动画，并且可以通过初始化设置完成。我不是以任何方式支持它，但我确信slick carousel有这个选项。向下滚动到“自适应高度”部分。

当然，您可能希望保留现在使用的滑块，并使用其启动幻灯片更改的回调，获取新幻灯片的高度并为滑块容器的高度设置动画以匹配新的幻灯片。为了使您的内容不会跳转，您可能希望使用overflow:hidden整个滑块的容器，并在每次幻灯片更改时更改该容器的max-height。

希望以上内容有意义并帮助您。