JavaScript

Ребята, вот сделал анимацию выпадающего списка. Все работает, но мне интересно ваше профессиональное мнение.

Написал выпадающий список, он работает, но мне кажется что я чешу правой рукой левое ухо. Звучит вроде просто "Выпадающий список с анимацией", а пришлось нагородить не скажу что жесткий джес, но приличный если честно, не для новичка явно. И мне кажется я составил алгоритм не правильный. Как бы сделали это вы? Хотя с другой стороны если посмотреть я сделал это как модуль и если мне где-либо понадобится выпадающий список с анимацией я могу менять только название анимаций в принимающем конструкторе, помучался раз а дальше экспортить свой же модуль, не буду же я его каждый раз заново писать в принципе

В общем если есть советы как бы вы сделали или как бы вы упрастили мой пример был бы признателен

вот фиддл на него https://jsfiddle.net/vmpx2ner/

ПС не знаю почему в фидле анимация срабатывает только один круг, в браузерах работает без ошибок.

ПС2 я застрял на одном моменте и мне тут в ответах помогли, хотел сказать спасибо всем помогающим, действительно очень сильно помогаете советами!!
Ну... код пишут для людей, а не для кампуктера)

click, listsLi, listUl, animationOn, animationOut - ни о чем не говорят. click - я вообще подумал, что это ожидаемое событие, которое должно запускать анимацию.

Если ожидается больше 3-х параметров, и это не какая-то математическая функция, места параметров легко можно перепутать. Легче делать это в виде

constructor(selectors) {
  /* selectors = { // прямо оставляя комментарий ожидаемого объекта
        btn: { string } "click", etc.,
        li: остальные описания, и для чего нужны (позже можешь сам забыть)
        ul:
        animationOn
        animationOut
    } */

      // а дальше код
}

ft_run(), add_pos() — невозможно понять о чем они, не глядя на их реализацию. Значит названия неудачные...

setTimeout(ft = () => {

неявное присваивание внутри вызова функции...
Никто не мешал записать let ft = () => ляляля, а вызвать в виде ft() без нулевого таймаута... Хотя название `ft` - тоже загадка.
________________

Касаемо реализации... сделал бы его в виде обычной функции, а не класса. Класс должен хранить какие-то данные и предоставлять методы, которые могут быть вызваны откуда-то еще. Здесь класс просто связывает свои же методы между собой, когда можно то же самое сделать внутри функции, и без кучи лишних this)

Касаемо "о боже, несколько вызовов функций будут дублировать его внутренние методы": Можно сделать на странице универсальные css-классы именно под эту задачу, и вызвать функцию только один раз. А уникальные стили под разные выпадающие списки - привязать к другим классам, в виде:

.my-class.active { ...}

.ma-another-class.active { ...}

Два разных выпадающих списка, js будет добавлять только активный класс.
Нурлан Буржакаев
Нурлан Буржакаев
62 360
Лучший ответ
Там по ссылке в вопросе жесть какая-то... В общем, вот:
https://jsbin.com/qayaxub/edit?css,js,output (с произвольными CSS-анимациями, с возможностью группового переключения, с закрытием меню кликом по бади, и т. д.)

// лучше не юзать filter:blur на анимируемых элементах - иначе на мобилах будет слайд-шоу вместо анимации
В опере список только 1 раз открывается больше нет
С Е
С Е
106
Сергей Павлов немного переделал, должно работать https://jsfiddle.net/s46tfn25/

Похожие вопросы