javascript - 如何在 react 中悬停时在图像上添加过渡时间？

Question

我正在开发一个 react 应用程序。我被图像动画困住了。当鼠标悬停时，图像会缩放到原始大小的 1.2 倍，但它应该具有 2s.i 的过渡时间。我可以缩放图像，但应该如何添加过渡时间。我的代码:

<Image
        src={this.props.data.profile_photo}
        alt={this.props.data.name}
        size="massive"
        avatar
        onClick={this.handleOpen}
        onMouseOut={() => this.setState({hovered: false})}
        onMouseOver={() => this.setState({hovered: true})}
        style={{transform: `${this.state.hovered ? 'scale(1.2,1.2)' : 'scale(1,1)'}`}}

我不知道把过渡的东西放在哪里。

Answer 1

您尝试过使用过渡吗？

抱歉，通常会将其放在评论中，但我的积分还不够丰富。

style={{transform: `${this.state.hovered ? 'scale(1.2,1.2)' : 'scale(1,1)'}`, transition: `${this.state.hovered ? '0.5s' :  '0.5s;`}}

您可能需要稍微调整一下，但这适用于标准 css 样式元素。

https://css-tricks.com/almanac/properties/t/transition/