禁用单个 CSS 过渡在 Firefox 中不起作用

Question

是否可以为all 添加一个过渡，但也只禁用一个？例如：

textarea {
  width: 400px;
  height: 60px;
  min-height: 60px;
  resize: vertical;
  color: #ccc;
  border: 1px solid #ccc;
  transition: all 0.3s, height 0s;
}

textarea:focus {
  color: #333;
  border: 3px solid #f00;
  padding: 10px;
}

<textarea>text</textarea>

您会看到（至少在 firefox 中）在调整框的大小时，它会滞后。在 Chrome 和 IE 中没有问题，工作正常。

同时使用1ms 之类的时间来禁用也不起作用：

textarea {
  width: 400px;
  height: 60px;
  min-height: 60px;
  resize: vertical;
  transition: all 0.5s, height 1ms;
}

<textarea placeholder="test"></textarea>

Answer 1

似乎是 Firefox 的一个错误，我看不到任何可靠的纯 CSS 解决方案。所以这里有一个JS解决方案。

我们将在focus 上添加一个事件侦听器，它会在延迟后删除transition，然后在blur 上重新添加过渡。

const fixFirefoxResizeTransition = el => {
  const elTransition = el.style.transition;
  const elTransitionDuration = parseFloat(getComputedStyle(el)['transitionDuration']) * 1000;
  
  el.addEventListener("focus", () => {
    setTimeout(() => {
      el.style.transition = "none"
    }, elTransitionDuration);
  });

  el.addEventListener("blur", () => {
    el.style.transition = elTransition;
  });
}

fixFirefoxResizeTransition(document.querySelector("textarea"));

textarea {
  width: 100%;
  height: 60px;
  min-height: 60px;
  resize: vertical;
  box-sizing: border-box;
  color: #ccc;
  border: 1px solid #ccc;
  transition: all 0.3s, height 1ms;
}

textarea:focus {
  color: #333;
  border: 3px solid #f00;
  padding: 10px;
}

<textarea>text</textarea>

Answer 2

transition: none 的使用似乎有效。

• 例如，我创建了一个带有过渡和一个没有。
  

    textarea {
      width: 400px;
      height: 60px;
      min-height: 60px;
      resize: vertical;
      transition: all 0.5s, height 1ms;
    }
    
    textarea.notransition{
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: color 0 ease-in;
        transition: none;
    }

<textarea class="notransition">without transition</textarea> <textarea>with transition</textarea>

您有以下 CSS。
- 如果你想要一个没有过渡的文本区域，我向 textarea 添加了一个类/如果你愿意，你也可以为其他东西创建一个新类。

希望这个例子对你有用。

Answer 3

您想只在 Firefox 浏览器中禁用过渡吗？

你试过用-moz-document url-prefix吗？

@-moz-document url-prefix() { 
  textarea{
     transition:none !important;
  }
}

或者你可以设置：

  textarea{
  width: 400px;
  height: 60px;
  min-height: 60px;
  resize: vertical;
  color: #ccc;
  border: 1px solid #ccc;
  transition: all 0.3s, height 0s;
-moz-transition-property: none;
}