Transition with Textarea's resize conflict

Issue

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.

Solution

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>

Answered By – gyre

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0