具有不同高度的滑块后内容更改位置的过渡
Transition for content changing position after slider with various heights
我有一个带有不同高度幻灯片的滑块。作为一个副作用，滑块 div 之后的内容会随着每次幻灯片的变化而上下移动 "jump"。
这是我的问题：当滑块改变高度时，如何实现滑块平滑移动到位后的内容？我尝试了 CSS 转换 属性，但无济于事。
为了说明我的目标，这里 link Apple 的一个页面做得恰到好处：http://www.apple.com/tvos/
基本上，你有这样的布局：
<slider></slider>
<rest-of-content></rest-of-content>
虽然实际上 <rest-of-content> 的位置随着 <slider> 高度的改变而改变，但是 什么都没有 你可以在<rest-of-content>处改变，让它平滑跳跃。您需要使 <slider> 的 height 属性 平滑变化，并且自动地，DOM 中跟随它的所有其他内容也会平滑地改变位置。
滑块的 height 属性 动画根据您使用的滑块而有很大差异，但其中很多提供了开箱即用的平滑高度变化动画的能力，并且可以通过初始化设置来完成。我不以任何方式认可它，但我确信 slick carousel 有这个选项。向下滚动到 "Adaptive height" 部分。
当然，您可能希望保留现在使用的滑块，并使用其启动幻灯片更改的回调，获取新幻灯片的高度并设置滑块容器高度的动画以匹配新幻灯片。为了让您的内容不跳转，您可能希望为整个滑块使用一个带有 overflow:hidden 的容器，并在每次幻灯片更改时更改该容器的 max-height。
希望以上内容对您有所帮助。
我有一个带有不同高度幻灯片的滑块。作为一个副作用，滑块 div 之后的内容会随着每次幻灯片的变化而上下移动 "jump"。 这是我的问题：当滑块改变高度时，如何实现滑块平滑移动到位后的内容？我尝试了 CSS 转换 属性，但无济于事。
为了说明我的目标，这里 link Apple 的一个页面做得恰到好处：http://www.apple.com/tvos/
基本上，你有这样的布局：
<slider></slider>
<rest-of-content></rest-of-content>
虽然实际上 <rest-of-content> 的位置随着 <slider> 高度的改变而改变，但是 什么都没有 你可以在<rest-of-content>处改变，让它平滑跳跃。您需要使 <slider> 的 height 属性 平滑变化，并且自动地，DOM 中跟随它的所有其他内容也会平滑地改变位置。
滑块的 height 属性 动画根据您使用的滑块而有很大差异，但其中很多提供了开箱即用的平滑高度变化动画的能力，并且可以通过初始化设置来完成。我不以任何方式认可它，但我确信 slick carousel 有这个选项。向下滚动到 "Adaptive height" 部分。
当然，您可能希望保留现在使用的滑块，并使用其启动幻灯片更改的回调，获取新幻灯片的高度并设置滑块容器高度的动画以匹配新幻灯片。为了让您的内容不跳转，您可能希望为整个滑块使用一个带有 overflow:hidden 的容器，并在每次幻灯片更改时更改该容器的 max-height。
希望以上内容对您有所帮助。