如何在动态图像上显示高度过渡 - 反应 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 属性来获得过渡。

缺点：

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

解决方案 #2 - ScaleY

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

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