CSS过渡在样式化组件中不起作用

Question

当props.pop更改时，我试图使过渡缓慢（500ms）缩放Brandsdiv。 pop等于true或false。当前，transform: ${props => (props.pop ? "scale(1.2)" : "scale(1)")};可以正常工作，并且在pop = true时缩放div，但是过渡不起作用-缩放比例突然改变。

import React from 'react'
import styled from 'styled-components'

const LogoImg = styled.img`
  max-width: 100%;
  padding: 5px;
`

export default function FeaturedManufacturerLink(props) {
  const {
    brandPagePath, 
    logo, 
    pop
  } = props

  const Brandsdiv = styled.div`
    transition: transform 500ms;
    display: flex;
    width: 116px;
    height: 85px;
    border-radius: 50%;
    margin: 25px 35px;
    align-items: center;
    text-align: center;
    transform: ${props => (props.pop ? "scale(1.2)" : "scale(1)")};
  `
  return (
    <Brandsdiv pop={pop}>
      <a href={brandPagePath}>
        <LogoImg src={logo} />
      </a>
    </Brandsdiv>
  )
}

Answer 1

我搬了const Brandsdiv。道具更改pop导致组件重新呈现。