Question

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

＆＃13;

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

＆＃13;

<textarea>text</textarea>

＆＃13;

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

同样使用像1ms这样的时间来禁用功能：

＆＃13;

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

＆＃13;

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

＆＃13;

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似乎有效。

例如，我创建了一个有过渡而一个没有。

＆＃13;

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

＆＃13;

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

＆＃13;

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

我希望这个例子对你有用。

Answer 3

好像是Firefox的一个错误，我看不到任何可靠的CSS解决方案。所以这是一个JS解决方案。

我们会在focus上添加一个事件监听器，在延迟后删除transition，然后在blur上重新添加转换。

＆＃13;

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"));

＆＃13;

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

＆＃13;

<textarea>text</textarea>

＆＃13;

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

3 个答案: