Mi menú desplegable funciona bien, sin embargo, al hacer clic, me gustaría agregar una transición, pero leí que las transiciones no se pueden agregar para mostrar las propiedades.
En segundo lugar, me gustaría rotar la fuente Awesome Carat -180 grados al hacer clic en mi lista desplegable
Esto es lo que tengo hasta ahora:
const dropdown = document.querySelector('.dropdown-btn'); const options = document.querySelector('.options'); const rotate = document.querySelector('.fas fa-angle-down'); dropdown.addEventListener('click', function() { options.classList.toggle('active'); }); li { background: red; list-style-type: none; } .options { padding-left: 0; margin-bottom: 0; height: 100%; } .options li { display: none; padding: 10px; transition: 350ms ease; margin-bottom: 15px; } .rotate-carat { transform: rotate(-180px); } .options.active li { display: block; opacity: 1; transition: 350ms all; font-size: 0.875rem; } <li> <a href="#" class="dropdown-btn"><i class="fas fa-address-card"></i> <span>Company Profile</span> <i class="fas fa-angle-down" style="float: right;"></i> </a> </li> <ul class="options"> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> <li>Primero, arreglaría su html: sus opciones ul deberían estar dentro de li
Luego alternaría la clase en el botón en el que se hizo clic y cambiaría su css para usar el selector secundario adyacente.
Para la transición de opciones, lo cambiaría de usar visualización a usar opacidad, de esta manera puede ocultar su ul usando altura y luego cambiar la opacidad de li una vez que cambie la altura nuevamente a automático
Para la rotación, debe usar deg en lugar de px
He comentado el código a continuación.
const dropdown = document.querySelector('.dropdown-btn'); dropdown.addEventListener('click', function(event) { // pass the event into the function // toggle the class on the clicked button event.currentTarget.classList.toggle('active'); }); li { background: red; list-style-type: none; } .options { display: block; height: 0; /* height 0 to start off hidden */ overflow: hidden; padding-left: 0; margin-bottom: 0; } .options li { display: block; opacity: 0; padding: 10px; transition: opacity 0.5s ease; /* transition opacity instead of display */ margin-bottom: 15px; font-size: 0.875rem; } /* add a rotation to your icon */ .fa-angle-down { transition: transform 350ms ease; } .active .fa-angle-down { transform: rotate(-180deg); /* use deg instead of px */ } /* change your active options selector to use the adjacent sibling selector */ .active+.options { height: auto; /* this will show the list before the opacity transitions */ } .active+.options li { opacity: 1; } <ul> <li> <a href="#" class="dropdown-btn"> <i class="fas fa-address-card"></i> <span>Company Profile</span> <i class="fas fa-angle-down" style="float: right;">test</i> </a> <!-- fix your html and move your options ul here --> <ul class="options"> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> </li> </ul>¡mira esto!
const dropdown = document.querySelector('.dropdown-btn'); const options = document.querySelector('.options'); const rotate = document.querySelector('.rotate-carat'); dropdown.addEventListener('click', function() { options.classList.toggle('active'); rotate.classList.toggle('active'); }); li { background: red; list-style-type: none; } .options { padding-left: 0; margin-bottom: 0; transition: 350ms all linear; transform: scaleY(0); /*height: 0;*/ overflow: hidden; opacity: 0; transform-origin: top; } .options li { display: block; padding: 10px; margin-bottom: 15px; font-size: 0.875rem; } .rotate-carat { display: inline-block; float: right; transition: all 300ms linear; } .rotate-carat.active { transform: rotate(180deg); } .options.active { opacity: 1; transform: scaleY(1); /*height: 10rem;*/ /*animation: 1s height 350ms forwards;*/ } @keyframe height { from { height: 10rem; } to { height: auto; } } <script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script> <li> <a href="#" class="dropdown-btn"><i class="fas fa-address-card"></i> <span>Company Profile</span> <span class="rotate-carat"> <i class="fas fa-angle-down"></i> </span> </a> </li> <ul class="options"> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> <li>Una manera fácil de agregar una buena transición que ves en muchos sitios web es usar translateX() .
Entonces, el menú se muestra, pero fuera de la ventana gráfica, por lo que no lo ve. Y cuando se alterna, se desliza hacia adentro y hacia afuera.
const list = document.querySelector('ul'); const toggle = document.querySelector('#menu-toggle'); toggle.addEventListener('click', (e) => { list.classList.toggle('active'); }); ul{ transform: translateX(-100%); transition: transform .3s; } ul.active{ transform: translateX(0); } <button id='menu-toggle'>Show Menu</button> <ul> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul>De lo contrario, recomendaría ver este video: Kevin Powell - Animación desde la pantalla ninguno .