css - 如何在动态图像上显示高度过渡 - react 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/