#div { width: 20px; border: 2px solid black; animation: 5s change-width paused forwards; } @keyframes change-width { from { overflow: hidden; } to { overflow: visible; width: 100px; } } <div id="div">abcdefghijklmnopqrstuvwxyz</div> <button onclick="document.getElementById('div').style.animationPlayState = 'running'"> Run </button> Mira cómo la discreta animación de overflow cambia abruptamente en medio de la animación. ¿Cómo forzar que suceda al final de la animación?
Intenté cambiar el overflow: hidden de @keyframes a la regla .default , pero fue en vano.
#div { width: 20px; border: 2px solid black; overflow: hidden; animation: 5s change-width paused forwards; } @keyframes change-width { to { overflow: visible; width: 100px; } } <div id="div">abcdefghijklmnopqrstuvwxyz</div> <button onclick="document.getElementById('div').style.animationPlayState = 'running'">Run</button>=== La propiedad de desbordamiento no se puede animar. ===
ver la lista de propiedades animadas aceptadas
Necesitas código js para eso:
const myDiv = document.querySelector('#my-div') document.querySelector('#my-button').onclick =_=> { myDiv.classList.add('change_w') setTimeout(()=>{ myDiv.classList.add('no-overflow')}, 3000) } #my-div { width : 20px; overflow : hidden; border : 2px solid black; transition : width 3s ease-in-out } #my-div.change_w { width : 100px; } #my-div.no-overflow { overflow: visible; } <div id="my-div">abcdefghijklmnopqrstuvwxyz</div> <button id="my-button"> Run </button>también puede usar un evento de fin de transición
const myDiv = document.querySelector('#my-div') document.querySelector('#my-button').onclick =_=> { myDiv.classList.add('change_w') } myDiv.ontransitionend =_=> myDiv.classList.add('no-overflow') #my-div { width : 20px; overflow : hidden; border : 2px solid black; transition : width 5s ease-in-out } #my-div.change_w { width : 100px; } #my-div.no-overflow { overflow: visible; } <div id="my-div">abcdefghijklmnopqrstuvwxyz</div> <button id="my-button"> Run </button>para el registro: dentro y fuera mostrar/ocultar
const myDiv = document.querySelector('#my-div') mybt = document.querySelector('#my-button') mybt.onclick =_=> { mybt.disabled = true myDiv.classList.remove('no-overflow') let largeWidth = myDiv.classList.toggle('change_w') myDiv.addEventListener('transitionend', finish ) function finish() { mybt.disabled = false if (largeWidth) myDiv.classList.add('no-overflow') myDiv.removeEventListener('transitionend', finish ) } } #my-div { width : 40px; overflow : hidden; border : 1px solid black; transition : width 3s ease-in-out } #my-div.change_w { width : 100px; } #my-div.no-overflow { overflow: visible; } <div id="my-div">abcdefghijklmnopqrstuvwxyz</div> <button id="my-button"> Run </button>