禁用在Firefox中无效的单个CSS转换

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浏览器中禁用转换吗？

您是否尝试过使用-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;
}

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的一个错误，我看不到任何可靠的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>