SCSS 过渡项上的子项导致父项的边框大小在 Firefox 中更改答案

【问题标题】：child on SCSS transition item causes the parent's border size to change in firefoxSCSS 过渡项上的子项导致父项的边框大小在 Firefox 中更改
【发布时间】：2021-08-29 16:11:17
【问题描述】：

在处理 SCSS 过渡时，我制作了两个类 trigger 和 box，当悬停在 trigger box 上时，应该开始移动和旋转。

.trigger {
  
  display: inline-block;
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
  background-color: #ddd;
  outline: 20px solid #999;
  position: relative;
  margin: 25% 25%;

  &:hover {
    .box {
      transform: translate(200px, 150px) rotate(20deg);
    }
  }
}
.box {
  display: inline-block;
  background-color: pink;
  width: 100px;
  height: 100px;
  transition: transform 1000ms ease-in-out;
}

效果在 chrome 上运行良好 [1]：https://i.stack.imgur.com/E2CnC.png

然而 Firefox 会缩放触发边框 [2]：https://i.stack.imgur.com/6OVW4.png

玉码

.trigger
    .box

【问题讨论】：

请注意，问题只能使用与问题相关的标签进行标记。出于这个原因，我删除了 Pug 标签。

标签： css sass css-animations

【解决方案1】：

我将position: relative 添加到.trigger 和position: absolute 到框中。我没有你的 html，所以我猜测它可能是什么样子。这个解决方案似乎至少在 codepen 中有效（我在 Chrome 和 Firefox 中查看过，两者都在工作）。在此示例中，我必须将您的 scss 修改为 css，以便在 codepen 中对其进行修改并在此处发布。

.trigger {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
  background-color: #ddd;
  outline: 20px solid #999;
  position: relative;
  margin: 5% 25%;
}
.trigger:hover .box {
  transform: translate(200px, 150px) rotate(20deg);
}

.box {
  position: absolute;
  display: inline-block;
  background-color: pink;
  width: 100px;
  height: 100px;
  transition: transform 1000ms ease-in-out;
}

<div class="trigger">
  <div class="box"></div>
</div>

【讨论】：