除了宽度，我无法转换任何属性

Question

我正在尝试弄清楚转换、动画和过渡是如何工作的，我已经学习了至少 1 或 2 门速成课程，并且我已经学习了 5 种与此相关的问题的解决方案，但仍然没有任何效果。

#tr-w {
  transition: width 1s ease-in-out;
}

#tr-w:hover {
  width: 50%;
}

#tr-h {
  transition: height 2s ease-in-out;
}

#tr-h:hover {
  height: 40vh;
}

#tr-r {
  transition: width 1s ease-in-out, transform 2s ease-in-out;
}

#tr-r:hover {
  transform: rotateZ(180);
  width: 30vh;
}

JSFiddle: https://jsfiddle.net/q976oc0h/1/
代码沙盒：https://codesandbox.io/s/dark-pine-i0ut5?file=/index.html
代码笔：https://codepen.io/ssssss12518/pen/rNMMZoL

它不适用于我所知道的任何代码编辑器，即使是像 Atom 这样的 IDE。（我的主要文本编辑器）

Answer 1

发生了几件事。

变换函数也有一个单位： transform: rotateZ(180); -> transform:rotateZ(180deg);

直观上不支持从 height:auto; 的转换。
有几个解决方法。您可以在 this question

上找到示例

旁注：通常，在 width/height 上转换对性能来说是不好的做法。它将触发文档结构的reflow/recalculate。这是昂贵的。您还会注意到 div 中的文本被压缩成多行或移动很多。
一般的做法是使用transform到shrink/grow/fold-out的元素。就像你对旋转所做的那样。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Arial", sans-serif;
}

.container {
  padding: 10px;
  margin-left: 20px;
}

.container > *[class*="bg"] {
  margin-left: 10px;
}

.bg-gray {
  margin: 10px 0px;
  background-color: #cbd5e0;
  border: 3px solid black;
  padding: 20px;
  margin-bottom: 20px;
  width: 30%;
}

#tr-w {
  transition: width 1s ease-in-out;
}

#tr-w:hover {
  width: 50%;
}

#tr-h {
  transition: height 1s ease-in-out;
  height:100px; /*I've added a base heigth to so the browser can calculate a starting value */
}

#tr-h:hover {
  height: 40vh;
}

#tr-r {
  transition: transform 1s ease-in-out;
}

#tr-r:hover {
  transform: rotateZ(180deg); /*i've added a 'deg' as unit*/
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Transition Animation CC</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">

      <div class="bg-gray" id="tr-w">
        <p>
          Hover over me
        </p>
      </div>
      <div class="bg-gray" id="tr-h">
        <p>
          Hover over me
        </p>
      </div>

      <div class="bg-gray" style="height: 30vh;" id="tr-r">
        <p>
            Hover over me
        </p>
      </div>
    </div>
    <script src="main.js" charset="utf-8"></script>
  </body>
</html>

Answer 2

因为您没有为#tr-h 元素设置默认高度

#tr-h {
  transition: height 2s ease-in-out;
  height:100px;
}

除了宽度，我无法转换任何属性

I can't transition any property EXCEPT the width

html

css

animation

transition

除了宽度，我无法转换任何 属性

I can't transition any property EXCEPT the width

html

css

animation

transition

除了宽度，我无法转换任何属性