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属性来获得过渡。

破坏：

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

解决方案2-ScaleY

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

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

如何在动态图像上显示高度过渡-React CSS

1 个答案: