Cuando aplico la transition al área de textarea , por defecto afecta la función de cambio de resize . Quiero deshabilitar la transition solo en la acción de cambio de resize del área de textarea , pero no en el textarea en sí misma. ¿Es esto posible de hacer?
<textarea name="" id="" class="txtarea"></textarea> .txtarea { transition: 3s; resize: vertical; height: 140px; max-height: 350px; min-height: 140px; } No estoy dispuesto a deshabilitar la transition por completo para el área de textarea , sino solo para la acción de cambio de resize
Sería muy bueno tener una solución CSS, pero si no, JS también estará bien.
Puede incluir en la lista blanca un conjunto de propiedades de transition que necesite, por ejemplo, color , y simplemente omitir la height de esa lista (el valor predeterminado para transition-property es all ).
Observe en el fragmento a continuación cómo la propiedad de color cambia suavemente, mientras que el cambio de tamaño ocurre instantáneamente.
.txtarea { transition: color 3s; resize: vertical; height: 140px; max-height: 350px; min-height: 140px; } .txtarea:focus { color: #f00; font-size: 1.5em; } <textarea name="" id="" class="txtarea"></textarea> Si ambos eventos requieren que cambie la propiedad de height , puede ajustar dinámicamente textarea.style.transitionProperty cuando desee activar el cambio suave:
var textarea = document.querySelector('textarea') var token function reset (e) { e.style.transitionProperty = '' } function setHeightSmooth (px) { clearTimeout(token) textarea.style.transitionProperty = 'all' textarea.style.height = px + 'px' token = setTimeout(reset, 3000, textarea) } .txtarea { transition: color 3s; resize: vertical; height: 140px; max-height: 350px; min-height: 140px; } .txtarea:focus { color: #f00; } <button onclick="setHeightSmooth(350)">Expand</button> <button onclick="setHeightSmooth(140)">Collapse</button> <br> <textarea name="" id="" class="txtarea"></textarea>No estoy del todo seguro de haber entendido la pregunta correctamente, pero mi interpretación es que quieres transición para todo excepto la altura. Entonces una solución css simple es esta:
.txtarea { transition: all 3s, height 0s; }Sé que es un poco tarde, pero tal vez esto ayude a alguien con la misma pregunta.