Написал выпадающий список, он работает, но мне кажется что я чешу правой рукой левое ухо. Звучит вроде просто "Выпадающий список с анимацией", а пришлось нагородить не скажу что жесткий джес, но приличный если честно, не для новичка явно. И мне кажется я составил алгоритм не правильный. Как бы сделали это вы? Хотя с другой стороны если посмотреть я сделал это как модуль и если мне где-либо понадобится выпадающий список с анимацией я могу менять только название анимаций в принимающем конструкторе, помучался раз а дальше экспортить свой же модуль, не буду же я его каждый раз заново писать в принципе
В общем если есть советы как бы вы сделали или как бы вы упрастили мой пример был бы признателен
вот фиддл на него https://jsfiddle.net/vmpx2ner/
ПС не знаю почему в фидле анимация срабатывает только один круг, в браузерах работает без ошибок.
ПС2 я застрял на одном моменте и мне тут в ответах помогли, хотел сказать спасибо всем помогающим, действительно очень сильно помогаете советами!!
JavaScript
Ребята, вот сделал анимацию выпадающего списка. Все работает, но мне интересно ваше профессиональное мнение.
Ну... код пишут для людей, а не для кампуктера)
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 будет добавлять только активный класс.
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 будет добавлять только активный класс.
Там по ссылке в вопросе жесть какая-то... В общем, вот:
https://jsbin.com/qayaxub/edit?css,js,output (с произвольными CSS-анимациями, с возможностью группового переключения, с закрытием меню кликом по бади, и т. д.)
// лучше не юзать filter:blur на анимируемых элементах - иначе на мобилах будет слайд-шоу вместо анимации
https://jsbin.com/qayaxub/edit?css,js,output (с произвольными CSS-анимациями, с возможностью группового переключения, с закрытием меню кликом по бади, и т. д.)
// лучше не юзать filter:blur на анимируемых элементах - иначе на мобилах будет слайд-шоу вместо анимации
В опере список только 1 раз открывается больше нет
Сергей Павлов
немного переделал, должно работать https://jsfiddle.net/s46tfn25/
Похожие вопросы
- Перезапуск GIF-анимации по событию.
- Подскажите как на html сделать простую форму со списком должности, строка для фио, список график работы
- Как сделать чтобы, когда гость попадает на мой сайт его IP заносился в log, список или базу данных SQL?
- Посмотрите пожалуйста задание. Всё работает. Тем не менее, интересно услышать замечания по коду.
- Где найти хорошие примеры анимации персонажей в играх на Javascript ?
- какой учебник по вашему мнению лучше и информативней?
- Подскажите сайт (ы) где показаны что добавили в js нового, чтобы список нововведений обновлялся
- Как выглядит примерный код выпадающего навигационного меню на Javascript?
- Проверьте 2 кода ((( пожалуйста и ткните носом на ошибку. В общем 1 код работает частично, а второй вообще не работает. JS
- Станут ли вэб разработчики менее востребованы и станет ли сам вэб менее популярным через лет 20-30? ваше мнение
лучше?)