mrMob

Добиться более плавной анимации помог комплекс следующих действий:

1. Точное указание property у transition (т.е. вместо "transition: all" указываем конкретное свойство с которым производится анимация).
2. Использование при JS манипуляции с классами не classList, а className. Переход на это решение позволил добиться реального прогресса в плавности анимации. В частности, это решение подсказал VK, там используется такая же схема. Метод className входит в DOM Core (level 2), имеет практически полную совместимость со всеми браузерами, а также более эффективно обрабатывается браузерными движками с минимальными задержками.

Для читаемости давайте вторую функцию - она одинаковая - тоже в переменную:

let f2 = function () {
  f(1);
}

Тогда код выглядит так:

// №1
( f2() );

// №2
( f2 )();

В первом случае можно убрать внешние скобки, они ничего не добавляют в данном случае.
Во втором можно убрать скобки вокруг f2 - они тоже ничего не меняют.
Итого, разницы нет )

Без разницы, важна сама цель, показать интерпретатору, что это выражение, а не конструкция. Можно разными способами

+function() { }()
!function() { }();
10 + function() { }();