1

我对 React 和所有花哨的东西都很陌生。

在 google-react-map 上,有一些标记。他们每个人都有一个我想在悬停时缩放的图标。

我使用 styled-components 进行样式设置

const Icon = styled.div`
  width: ${MARKER_SIZE}px;
  height: ${MARKER_SIZE}px;
  /* animated */
  transform: scale(${props => props.scale});
`;

有反应运动

<Motion defaultStyle={{ scale: 1 }} style={{ scale: spring($hover ? 1.5 : 1) }}>
  { interpolated =>
    <Icon $hover={$hover} onClick={this.handleClick} {...interpolated}/>
  }
</Motion>

这在开始时运行流畅且快速,但经过几次悬停后,动画变得越来越滞后。

我可能在这里错过了一些重要的东西

4

0 回答 0