When I apply transition
to textarea
, it's by default affect the resize
function of it. I want to disable transition
only on the resize
action of textarea
, but not the textarea
it self - is this even possible to do?
<textarea name="" id="" class="txtarea"></textarea>
.txtarea {
transition: 3s;
resize: vertical;
height: 140px;
max-height: 350px;
min-height: 140px;
}
I'm not willing to disable transition
entirely for the textarea
, but only for the resize
action
Would be very nice to have a CSS solution, but if not, JS will be OK as well.
You can whitelist a set of transition
properties you need, for example color
, and simply omit height
from that list (the default value for transition-property
is all
).
Notice in the snippet below how the color
property transitions smoothly, while resizing happens instantly.
.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>
If both events require the height
property to change, you can dynamically adjust textarea.style.transitionProperty
when you want to trigger the smooth change:
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>
Not entirely sure I understood the question correctly but my interpretation is that you want transition for everything except the height. Then a simple css solution is this:
.txtarea {
transition: all 3s, height 0s;
}
I know its a bit late but maybe this will help someone with the same question.