Содержимое div смещается влево после масштабной анимации - PullRequest
Новая
       8

Содержимое div смещается влево после масштабной анимации

1 голос
/ 12 марта 2019

У меня есть div, в котором после применения преобразования scale () (с использованием response-spring) к нему на mouseOver и mouseLeave содержимое div смещается на 1 или 2 пикселя влево после возврата к исходному масштабу (1)position.

Gif поведения div

Вот компонент Card (с использованием styled-компонентов): 

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>
  )
}

Любое понимание будет высоко оценено!

РЕДАКТИРОВАТЬ: я должен добавить, что, если я оставлю масштаб мыши вокруг 1.0, то есть 1,00001 или 0,99999,содержимое не сдвигается, как было описано.В идеале я хочу исправить это, не прибегая к этому хаку, но если я оставлю это так, стоит ли ожидать снижения производительности?

...