Блог

Я использую LESS для оформления веб-страницы (с помощью Bootstrap). Что я хотел бы сделать, так это добавить плавный переход цвета при наведении курсора мыши на элемент. Разве эта функциональность не поставляется прямо из коробки в 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 ..

Как я могу сделать плавный переход цвета с МЕНЬШИМ КОЛИЧЕСТВОМ?

Вам нужно будет добавить transition атрибут к классу .list-group-item, например:

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

Переход указывает браузеру на интерполяцию между двумя определенными атрибутами. fadein и lighten — это МЕНЕЕ специфические функции, которые обрабатывают только значение цвета, в результате чего получается фиксированное значение цвета.
т. е. это
lighten(#aa0000, 5) приведет к значению цвета # c30000;

fadein делает то же самое с манипуляциями с цветом, но изменяет значение непрозрачности.