SCSS 过渡项上的子项导致父项的边框大小在 Firefox 中发生变化

Question

处理 SCSS 转换我做了两个类触发器和框，当悬停在触发器框上时应该开始移动和旋转。

.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

Answer 1

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

.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>

SCSS 过渡项上的子项导致父项的边框大小在 Firefox 中发生变化

child on SCSS transition item causes the parent's border size to change in firefox

css

sass

css-animations