Me gustaría una barra para animar de izquierda a derecha. Tengo una entrada numérica. Después del clic de envío, la barra debería estar animada.
Desafortunadamente, no sé cómo activar la animación. Establecí deliberadamente el valor de ancho inicial en 150 px para mostrar que la animación realmente funciona, pero no funciona si se activa mediante programación.
btn = document.getElementById("btn"); btn.addEventListener('click', () => { const val = document.querySelector('input').value draw(val); }) function draw(val) { bar = document.getElementById("bar"); bar.style.setProperty('--width', (val * 10) + "px"); } :root { --width: 150px; } #bar{ background:red; height:50px; margin:50px; transform-origin:top; animation: grow 2s forwards; } @keyframes grow { from { width:0px; } to { width:var(--width); } } <input value="5"> <button id="btn">draw</button> <div id="bar"></div>En lugar de animación, use transtion CSS. Entonces (casi) cualquier cambio en un elemento sería animado.
const runIt = () => { $('.bar').css('width', '100%'); }; .bar { height: 5px; border-radius: 5px; background: blue; transition: 2s; width: 10px; margin-bottom: 20px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="bar"></div> <button onclick="runIt()">Run</button>Esto parece un uso perfecto para CSS Transitions . En lugar de agregar una animación al elemento, simplemente configure su ancho para tener un tiempo de transition . Luego, cada vez que cambie el ancho, se animará.
const btn = document.getElementById("btn"); btn.addEventListener('click', () => { const val = document.querySelector('input').value draw(val); }) function draw(val) { bar = document.getElementById("bar"); bar.style.setProperty('width', (val * 10) + "px"); } #bar{ background:red; width: 0; height:50px; margin:50px; transform-origin:top; transition: width 2s; /* Any time the width changes, it will be animated of 2 seconds */ } <input value="5"> <button id="btn">Click Me</button> <div id="bar"></div>