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

【问题标题】：I can't transition any property EXCEPT the width除了宽度，我无法转换任何属性
【发布时间】：2021-04-17 05:02:08
【问题描述】：

我正在尝试弄清楚转换、动画和过渡是如何工作的，我已经学习了至少 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。（我的主要文本编辑器）

【问题讨论】：

transform: rotateZ(180); --> transform: rotateZ(180deg);

标签： html css animation transition

【解决方案1】：

有几件事正在发生。

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

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

旁注：通常，在宽度/高度上进行转换对性能来说是不好的做法。它将触发文档结构的重排/重新计算。这是昂贵的。您还会注意到 div 内的文本被压缩成多行或移动很多。
一般的方法是使用transform 来缩小/增长/折叠元素。就像你对旋转所做的那样。

* {
  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>

【讨论】：

好的，谢谢，我现在意识到我可能没有成为 Web 开发人员的未来。（请不要生气。）但是非常感谢您的帮助！

【解决方案2】：

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

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

【讨论】：