我对 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>
这在开始时运行流畅且快速,但经过几次悬停后,动画变得越来越滞后。
我可能在这里错过了一些重要的东西