将转换速度限制为只有一个属性

Question

我有一个用 div 表示的简单正方形。我希望它在鼠标悬停时改变颜色，在鼠标悬停和鼠标离开时平滑过渡 0.8s。有用。现在我希望正方形在屏幕很小但没有过渡时改变位置。你可以测试这段代码，你可以看到位置变化是渐进的，但我希望它是即时的，没有过渡。那么如何将 transition 限制为仅颜色变化？

div {
  height: 100px;
  width: 100px;
  background-color: blue;
  transition: 0.8s;
}

div:hover {
  background-color: red;
  transition: 0.8s;
}

@media screen and (max-width: 680px) {
  div {
    margin-left: 200px;
    margin-top: 200px;
  }
}

<div></div>

Answer 1

您可以指定属性在过渡中更改，例如：transition: background-color 0.8s;

此外，您不需要 transition 属性 hover

div {
  height: 100px;
  width: 100px;
  background-color: blue;
  transition: background-color 0.8s;
}

div:hover {
  background-color: red;
}

@media screen and (max-width: 680px) {
  div {
    margin-left: 200px;
    margin-top: 200px;
  }
}

<div></div>

Answer 2

您可以用 0secs 和 !important 覆盖转换以确保它覆盖它。

div {
  height: 100px;
  width: 100px;
  background-color: blue;
  transition: 0.8s;
}

div:hover {
  background-color: red;
  transition: 0.8s;
}

@media screen and (max-width: 680px) {
  div {
    margin-left: 200px;
    margin-top: 200px;  
    transition: 0s !important;
  }
}

<html lang="en" dir="ltr">
<head> 
  <meta charset="utf-8">
  <link rel="stylesheet" href="debug.css">
  <title>Test</title>
</head>

<body>
  <div></div>


</body></html>

Answer 3

在过渡规则中使用背景颜色。参见：

    div {
      height: 100px;
      width: 100px;
      background-color: blue;
      transition: background-color .8s;
    }
    
    div:hover {
      background-color: red;
    }
    
    @media screen and (max-width: 680px) {
      div {
        margin-left: 200px;
        margin-top: 200px;
      }
    }

<div></div>

指定转换很重要。

将转换速度限制为只有一个 属性

Limiting transition speed to only one property

css

transition

将转换速度限制为只有一个属性