Question

当我将transition应用于textarea时，默认情况下它会影响resize的功能。我想在transition的{{1}}操作上禁用resize ，而不是textarea它自己 - 这甚至可以做到吗？

textarea

我不愿意完全停用<textarea name="" id="" class="txtarea"></textarea> .txtarea { transition: 3s; resize: vertical; height: 140px; max-height: 350px; min-height: 140px; } transition，但仅限于textarea行动

拥有一个CSS解决方案会很好，但如果没有，JS也可以。

Answer 1

您可以将所需的一组transition个属性列入白名单，例如color，并从该列表中省略height（transition-property的默认值为{{ 1}}）。

请注意下面的代码段中all属性如何平滑过渡，同时立即调整大小。

color

.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>属性，则可以在需要触发平滑更改时动态调整height：

textarea.style.transitionProperty

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;
}

转换与Textarea的调整冲突

1 个答案: