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

Question

当props.pop 发生变化时，我正在尝试缓慢（500 毫秒）扩展 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。 prop 更改 pop 导致组件重新渲染。