如何在动态图像上显示高度过渡 - 反应 css

Question

我正在努力将多个图像显示为幻灯片。图像高度是动态的，而不是静态的。我只想在移动到下一个图像时显示高度过渡的动画。

这是我的父div 容器。

<div style={ {height: '100%',margin: '0px',width: '100%',transition:'height 2s',}}>
<ImageSlide
url={this.images[currentImageIndex]}
/>
</div>

这是我的图像幻灯片组件。

<div style={{ position: 'relative' }}>
<img style={width: '100%',display: 'inline-block',transition: 'height 2s',} alt=" " src={url} />
</div>

如何在移动到下一个图像时渲染高度过渡动画？

Answer 1

解决方案 #1 - 最大高度

使用非像素大小(如auto或"%"和过渡(时，您可以依赖max-height属性来获得过渡。

Disavantages：

我们

• 仍然必须对元素的最大高度进行硬编码，即使我们不必对高度本身进行硬编码。
• 过渡长度实际上不会是您指定的长度，除非内容高度与最大高度完全相同

解决方案 #2 - ScaleY

另一种解决方案是依靠转换ScaleY。我们为元素的 transform 属性设置一个过渡，然后在 transform： scaleY(1( 和 transform： scaleY(0( 之间切换。这些分别意味着"以与它开始时相同的比例(在 y 轴上(呈现此元素"和"以 0 的比例(在 y 轴上(呈现此元素"。在这两种状态之间转换将整齐地将元素"挤压"到其基于内容的自然大小。作为奖励，即使是里面的字母和/或图像也会在视觉上"挤压"自己，而不是滑到元素的边界后面。缺点？由于不会触发回流焊，因此此元素周围的元素将完全不受影响。它们既不会移动也不会调整大小以填充空白空间。

参考文献和示例： https://css-tricks.com/using-css-transitions-auto-dimensions/