如何让textarea调整大小时不触发CSS transition效果？

要实现拖动textarea调整尺寸时不执行背景色过渡，核心思路是在拖动过程中临时禁用textarea的transition属性，拖动结束后恢复。具体实现如下：

解决方案代码 #

CSS 部分 #

/* 定义hover时的背景色变化 */
textarea:hover {
  background: rgb(200, 200, 200);
}

/* 仅对background属性设置过渡，避免影响其他属性 */
textarea {
  transition: background 1s;
}

/* 禁用过渡的辅助类 */
textarea.no-transition {
  transition: none !important;
}

HTML 部分 #

<textarea></textarea>

JavaScript 部分 #

const textarea = document.querySelector('textarea');
let isResizing = false;

// 监听鼠标按下，判断是否点击了右下角的调整手柄
textarea.addEventListener('mousedown', (e) => {
  const rect = textarea.getBoundingClientRect();
  const handleAreaSize = 12; // 调整手柄的大致范围，可根据需要调整
  const clickOnResizer = 
    e.clientX >= rect.right - handleAreaSize && 
    e.clientY >= rect.bottom - handleAreaSize;

  if (clickOnResizer) {
    isResizing = true;
    textarea.classList.add('no-transition');
  }
});

// 鼠标松开时恢复过渡效果
document.addEventListener('mouseup', () => {
  if (isResizing) {
    isResizing = false;
    textarea.classList.remove('no-transition');
    // 强制重绘，避免过渡状态异常
    void textarea.offsetWidth;
  }
});

// 处理鼠标移出窗口的情况
document.addEventListener('mouseout', (e) => {
  if (isResizing && e.target === document) {
    isResizing = false;
    textarea.classList.remove('no-transition');
  }
});

原理说明 #

1. 精准过渡属性：将textarea的transition明确指定为background，避免过渡效果影响其他属性（比如尺寸调整）。
2. 动态切换类：通过JavaScript判断鼠标是否点击了textarea右下角的调整手柄区域，若是则给textarea添加no-transition类，临时禁用过渡。
3. 恢复过渡：当鼠标松开或移出窗口时，移除no-transition类，恢复正常的hover过渡效果，同时通过void textarea.offsetWidth强制浏览器重绘，防止过渡状态残留。

内容的提问来源于stack exchange，提问作者Han Han