1

我有一个 div，在对 mouseOver 和 mouseLeave 应用 scale() 变换（使用 react-spring）后，div 的内容在返回到原始 scale(1) 位置后向左移动 1 或 2 个像素。

div 行为的 Gif

这是 Card 组件（使用样式组件）：

const Card = styled.div`
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  margin: 16px 0 32px 0;
  padding: 14px 24px 16px 24px;
  border: 1px solid hsla(0, 0%, 92%, 1);
  border-radius: 8px;
  color: ${props => props.theme.black};
  background: #fff;
  transition: transform 0.18s ease-in-out, box-shadow 0.18s ease-in-out;
  span {
    font-family: ${props => props.theme.headerFont};
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-align: left;
    color: #0c344b;
    opacity: 0.45;
    b {
      font-size: 12px;
    }
  }
  ${media.tablet`
    padding: 12px 30px 22px 30px;
  `}

`

这是它被渲染的地方：

export default function Article({
  date = '',
  title = '',
  timeToRead = '',
  excerpt = '',
  slug = ''
}) {
  const [hover, setHover] = useState(false)
  const props = useSpring({
    transform: `scale(${hover ? 1.05 : 1})`,
    borderRadius: `8px`,
    boxShadow: `${hover ? `1px 1px 14px #ededed` : `0px 2px 8px #f0f0f0`}`,
    config: {
      mass: 1,
      tension: 350,
      friction: 40
    }
  })

  return (
    <Link to={slug}>
      <animated.div style={props}>
        <Card
          onMouseOver={() => setHover(true)}
          onMouseLeave={() => setHover(false)}
        >
          <span>{date}</span>
          <span
            css={`
              float: right;
            `}
          >
            <b role="img" aria-label="Time to read">
              
            </b>{' '}
            {timeToRead} min
          </span>
          <h2
            css={`
              margin: 0;
              font-weight: 800;
              font-size: 1.4em;
              padding: 4px 0 8px 0;
            `}
          >
            {title}
          </h2>
          <p
            css={`
              margin: 0;
              line-height: 26px;
              font-size: 16px;
            `}
            dangerouslySetInnerHTML={{ __html: excerpt }}
          />
        </Card>
      </animated.div>
    </Link>
  )
}

任何见解将不胜感激！

编辑：我应该补充一点，如果我将 mouseOut 比例保持在1.0 左右，即 1.00001 或 0.99999，则内容不会像描述的那样移动。理想情况下，我想在不诉诸这种 hack 的情况下解决这个问题，但如果我这样离开它，我应该期待性能受到影响吗？

4

0 回答 0