Estoy haciendo una barra de navegación y tengo problemas para ocultar el botón que muestra la navegación hasta que desaparezca por completo.
pantalla: https://i.stack.imgur.com/pv6wk.png
mi código :
function show(){ var nav = document.getElementsByClassName("navigation")[0]; var phone_button = document.getElementsByClassName("button-phone")[0]; nav.style.transform = "translateX(0)"; phone_button.style.opacity = "0" } function hide(){ var nav = document.getElementsByClassName("navigation")[0]; var phone_button = document.getElementsByClassName("button-phone")[0]; nav.style.transform = "translateX(-100%)"; phone_button.style.opacity = "1" }Puede usar el evento de final de transición y ocultar el botón en un detector de eventos
Puede usar la propiedad z-index para .navigation en lugar de usar la opacity para phone_button . en el archivo CSS establece z-index:10; para la clase .navigaion .
Además de eso, es mejor establecer la propiedad en una clase en CSS y después de hacer clic en phone_button simplemente alternar esta clase específica para la navigation .
Puedes hacer esto:
const btn=document.querySelector(".menuBtn"); const nav=document.querySelector('.navigation'); const closeBtn=document.querySelector('.closeBtn'); btn.addEventListener('click',function(){ nav.classList.add('show'); }) closeBtn.addEventListener('click',function(){ nav.classList.remove('show'); }) *{ margin:0; box-sizing:border-box; } .container{ position:relative; display:flex; } .navigation{ position:absolute; width:200px; height:100vh; background-color:#e45; transform:translateX(-100%); transition:transform 0.5s; z-index:10 } .navigation.show{ transform:translateX(0) } li{ list-style:none; margin:0; } a{ text-decoration:none; color:white; padding:0.3rem 1rem; margin-top:0.5rem; display:block; } .closeBtn{ cursor:pointer; color:white; padding:1rem; display:block; margin-left:auto; } <div class="container"> <button class='menuBtn'>click me</button> <nav class="navigation"> <span class="closeBtn">close</span> <ui> <li> <a href="#">home</a> </li> <li> <a href="#">about</a> </li> </ui> </nav> </div> Con este fragmento de código después de que el usuario hizo clic en el click me ", la clase .show agrega a la lista de clases de elementos de nav .
puedes usar este evento mira este tutorial
https://www.w3schools.com/jsref/event_animationend.asp
var x = documento.getElementById("miDIV");
// Código para Chrome, Safari y Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Sintaxis estándar x.addEventListener("animationend", myEndFunction);