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.