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.