Estoy aprendiendo acerca de las transiciones de CSS y estoy tratando de hacer que 3 líneas de desplazamiento reduzcan el ancho a sus respectivos puntos centrales. En este momento, la transición de ancho ocurre a la izquierda y no al centro.
Aquí está el violín .
¿Cómo puedo hacer la transición del ancho de cada línea a sus respectivos puntos centrales?
El código:
const div = document.getElementById('lines') div.addEventListener('click', function() { var className = div.getAttribute("class"); if (className != 'open') { div.className = 'open'; } else { div.className = ''; } }) #lines { width: 250px; height: 250px; position: absolute; cursor: pointer; transition: .25s ease-in-out; } #lines span { border: 1px solid black; display: block; position: absolute; height: 15px; width: 200px; background: #d3531a; border-radius: 9px; transition: width .25s ease-in-out; } #lines span:nth-child(1) { top: 0px; } #lines span:nth-child(2) { top: 18px; left: 18px; } #lines span:nth-child(3) { top: 36px; left: 36px; } #lines.open span { width: 16px; }
Use transform: scale() lugar de width y el transform-origin la transform-origin será el centro por defecto.
const div = document.getElementById('lines') div.addEventListener('click', function() { var className = div.getAttribute("class"); if (className != 'open') { div.className = 'open'; } else { div.className = ''; } })
#lines { width: 250px; height: 250px; position: absolute; cursor: pointer; transition: .25s ease-in-out; } #lines span { border: 1px solid black; display: block; position: absolute; height: 15px; width: 200px; background: #d3531a; border-radius: 9px; transition: transform .25s ease-in-out; } #lines span:nth-child(1) { top: 0px; } #lines span:nth-child(2) { top: 18px; left: 18px; } #lines span:nth-child(3) { top: 36px; left: 36px; } #lines.open span { transform: scaleX(0); }