Question

我正在研究一个反应应用程序。我被困在图像动画上。当鼠标悬停在图像上时，它会缩放到原始的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/

Answer 2

React animation 快速的例子，这应该工作：

import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 <ReactCSSTransitionGroup
     transitionName="example"
     transitionAppear={false}
     transitionAppearTimeout={500}
     transitionEnter={true}
     transitionLeave={false}>
   <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)'}`}}

css代码

.example-enter {
  opacity: 0.01;
  }

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
 }

 .example-leave {
   opacity: 1;
  }

  .example-leave.example-leave-active {
     opacity: 0.01;
     transition: opacity 300ms ease-in;
  }

如何在悬停反应时在图像上添加转换时间？

2 个答案: