[css] 자릿수 계산하기,,, 고정되지 않은 width값 transition 주는 방법 알고 싶다.

 별점 매기는 컴포넌트

width값이 고정되어 있지 않고, padding값만 고정된 상태로 만들어 달라는 요청을 받았다. 

(원래는 width가 2.5의 width에 맞춰져있어서 padding이 고정이 아니였다.)

 

 

padding값을 주고, width는 isOn이 false일 땐 값을 안주려고 했더니 transition이 안 먹는다. 

 

width: ${(props: IRatingBtnProps) => (props.isOn ? "160px" : "")};

auto로 해도 안 먹는다.

100%로 하면 버벅인다.

 

transition은 두 상태 사이에 점진적인 값이 있을 때 가능하다고 한다. 

즉 visibility 같은 경우엔 visible, hidden 값이 두 개 뿐이기 때문에 안된다고 한다! 

 

결국 쓴 방법은

<S.RatingButton
        isOn={isOn}
        action={isOn ? false : props.action}
        onMouseOver={() => setIsHover(true)}
        onMouseOut={() => setIsHover(false)}
        count={String(count).length > 1}
      >

  width: ${(props: IRatingBtnProps) => (props.isOn ? "160px" : props.count ?  "74px" :  "61px")};

문자열로 바꿨을 때 자릿수가 1이 넘으면 74px, 넘지 않으면 61px로 하는 방법을 썼다...ㅠ_ㅠ

(소수점 한 자리까지 잘랐을 때만 되는 방법ㅎ)

 

일단 잘 되지만, 뭔가 다른 좋은 방법이 있을 것 같다.