Модификация Анимация при наведении на узел

Немного подредачил из темы

offtop

В extra.less:​

[data-template="forum_list"] .node-body:hover {
   background: transparent;
   transition: transform 1s;
   transform: scale(1.1);
}

 

В extra.less:

.node-body {
  transition: transform 0.3s;
}
.node-body:hover {
  transform: scale(1.02);
}

Теперь плавное приближение и отдаление

offtop

 

Теперь к тебе.

bbcode offtop, нужен для пометки сообщений, которые не имеют отношение к созданной выше темы.
К примеру как всё вот это моё полностью сообщение, которое не относится к теме разговора о Анимация при наведении на узел

В век нейронок, это всё настолько не имеет значение... что.. ну...

offtop

А вот теперь по делу:​

с точки зрения css, у тебя тут ошибка с дублированием и порядком css свойств.

.node-body {
  /* Сначала пишем основное состояние элемента,
     тут задаём общие свойства, например, плавный переход. */
  transition: transform 0.3s;
}

.node-body:hover {
  /* Потом идёт состояние "при наведении",
     где описываем, как элемент изменится, например, увеличится. */
  transform: scale(1.02);
}

Вот он в сокращённом виде:

.node-body {
  transition: transform 0.3s;
}
.node-body:hover {
  transform: scale(1.02);
}

 

@bobobo, окей, изменю. Хотя мне так удобно и ошибок не вызывает

 

@Aleksandr, это не ошибка, но когда ты дублируешь transition: 0.3s; в разных местах, это делает код менее аккуратным. Если убрать повтор, всё будет выглядеть чище и понятнее. Так потом и тебе, и другим, кто будет с этим работать, будет легче разобраться.

Вот тебе пример с ссылками, чтобы всё стало кристально ясно:

a {
  /* Здесь задаём базовые стили для всех ссылок на сайте,
     например, цвет и переходы. Эти свойства будут применяться ко всем ссылкам. */
  color: blue;
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  /* А здесь описываем, что будет происходить при наведении.
     При этом основной стиль, который ты задал выше, сохраняется. */
  color: darkblue;
}

.navbar a {
  /* Если тебе нужно отдельно стилизовать ссылки в определённом блоке,
     например, в навигационной панели, ты переопределяешь стиль,
     не трогая базовые свойства. */
  color: white;
}

.navbar a:hover {
  /* При наведении на ссылки внутри навбара они могут меняться,
     но только в пределах этой области. */
  color: lightgray;
}

Видишь? Сначала ты задаёшь основной стиль для элементаa, это как база. Потом, если надо что-то особенное для определённого блока или состояния, ты уже добавляешь свои кастомные настройки. Так структура чёткая, а главное, код остаётся понятным для всех, кто потом с этим работает.

 

@bobobo, окей, спасибо!