LESS로 부드러운 색상 전환

Question

저는 LESS를 사용하여 웹 페이지의 스타일을 지정하고 있습니다 (부트 스트랩 포함). 내가 마우스로 요소 위에 마우스를 올리면 부드러운 색 변환이 추가됩니다. 이 기능이 부족함이없이 바로 꺼내지는 않습니까?

.list-group { 
    .list-group-item:hover { 
     background: fadein(@cn-sidemenu-hover-bg, 100%); 
    } 
    .list-group-item { 
     background: @cn-sidemenu-bg; 
     color: #fff; 
    } 
} 

을하지만 이것은 더 컬러 애니메이션이 없습니다 :

나는 이런 식으로 그것을 할 노력하고있어. 하지만 그 이름이 나에게 이것은 일종의 컬러 애니메이션을해야한다는 것을 암시합니다. 그렇지 않으면

내가 fadein 및 lighten의 차이를 볼 수 없습니다 ..

내가 적은 부드러운 색상 전환을 할 수있는 방법

?

Answer 1

당신이 좋아하는 .list 그룹 항목 클래스에 transition 속성을 추가해야합니다

:

.list-group-item{ 
background: @cn-sidemenu-bg; 
color: #fff; 
transition: background 500ms; 
} 

전환은 두 개의 정의 된 속성 보간 브라우저를 알려줍니다. fadein 및 lighten은 색상 값을 고정 색상 값으로 처리하는 특정 기능이 더 적습니다. 즉,이 lighten(#aa0000, 5)은 # c30000의 색상 값을 갖습니다.

fadein은 색상 조작과 동일한 작업을 수행하지만 불투명도 값을 편집합니다.