If you only want certain properties, like color, to transition smoothly and exclude height from the list (since the default is all), you can whitelist them.
In the code snippet below, you'll see 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 you need both events to change the height property, you can adjust
textarea.style.transitionProperty
dynamically for a smooth transition:
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>