Question

我有一个div，其中在对mouseOver和mouseLeave进行了scale（）转换（使用react-spring）后，返回原始比例（1）后div的内容向左移动了1或2个像素位置。

这是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，但是如果我这样解决，我是否应该期望性能受到影响？

缩放动画后，div的内容向左移动

0 个答案: