Как добавить анимацию в раскрывающиеся списки Bootstrap?

Как добавить анимацию в выпадающее меню? Я предполагаю, изменив popperConfig, но как?

На данный момент выпадающее меню имеет сгенерированный встроенный стиль, например. position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 40px, 0px);

Конечно, я могу просто добавить к нему transition: translate .3s ease, но что, если я хочу изменить направление или что-то более сложное?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В текущем примере dm-example будет отображаемым выпадающим меню.
HTML не будет сильно отличаться от его примеров Bootstrap5:

    <div class = "dropdown">
        <button class = "btn btn-secondary dropdown-toggle" type = "button" id = "dropdownMenuButton1" data-bs-toggle = "dropdown" aria-expanded = "false">
          Dropdown button
        </button>
        <ul id = "dm-example" class = "dropdown-menu " aria-labelledby = "dropdownMenuButton1 ">
            <li><a class = "dropdown-item " href = "# ">Action</a></li>
            <li><a class = "dropdown-item " href = "# ">Another action</a></li>
            <li><a class = "dropdown-item " href = "# ">Something else here</a></li>
        </ul>
    </div>

Для обработки правил анимации CSS:
#dm-example.show - описывает начальные стили для блока;
#dm-example.show .dropdown-item - описывает начальные стили внутренних предметов;
dm-animation - анимация на блоке;
item-animation - это анимация предметов.

    <!-- Animate dropdown -->
     <style>
        #dm-example.show {
            position: fixed;
            animation-name: dm-animation;
            animation-duration: 2s;
        }
        
        #dm-example.show .dropdown-item {
            margin-bottom: 0;
            animation-name: item-animation;
            animation-duration: 2s;
        }
        
        @keyframes dm-animation {
            0% {
                margin-top: 0px;
            }
            50% {
                margin-top: 25px;
            }
            75% {
                margin-top: 5px;
            }
            100% {
                margin-top: 0px;
            }
        }
        
        @keyframes item-animation {
            0% {
                margin-bottom: 0px;
            }
            50% {
                margin-bottom: 25px;
            }
            75% {
                margin-bottom: 5px;
            }
            100% {
                margin-bottom: 0px;
            }
        }
    </style>

Другие вопросы по теме