SVG CSS 过渡变换在 Firefox 中闪烁

Question

我有一个带有图标的按钮，它是内联的 svg 元素。 当我单击该图标时，css 应用了三个转换。

1. 白色 svg 圆圈转换为主要的黑色圆圈以重叠它。
2. 容纳两个圆圈的 g 容器按比例放大。
3. 容纳两个圆圈的 g 容器旋转了 30 度。

在 Firefox 中，一旦圆圈在过渡结束时重叠，就会出现闪烁。

调试很困难，因为当我打开 firefox 开发工具时，很少发生闪烁。

 const btnToggle = document.querySelector(".btn-toggle"); const moonShadow = document.querySelector(".moon-shadow"); const sunAndMoon = document.querySelector(".sun-and-moon"); let toggle = true; btnToggle.addEventListener("click", () => { if (toggle) { moonShadow.style.transform = "translateX(0px)"; sunAndMoon.style.transform = "scale(1.5) rotate(30deg)"; } else { moonShadow.style.transform = "translateX(-15px)"; sunAndMoon.style.transform = "scale(1) rotate(0deg)"; } toggle =;toggle; });

 main { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }.btn-toggle { border: 0; background: inherit; cursor: pointer; } /* svg classes */.sun-and-moon { transform-origin: center; transition: transform 450ms; }.moon-shadow { transform-origin: center; -webkit-transform: translateZ(0); transition: transform 550ms; }

 <main> <p>Click icon</p> <button class="btn-toggle"> <svg xmlns="http://www.w3.org/2000/svg" width="84.0661" height="84.0661" viewBox="0 0 22.2425 22.2425"> <g class="sun-and-moon"> <circle class="sun" r="4.4093" cy="11.1212" cx="11.1212" fill="currentColor" /> <circle class="moon-shadow" style="transform: translateX(-15px);" r="4.4093" cy="11.1212" cx="7.5566" fill="#fff" /> </g> </svg> </button> </main>

Answer 1

我稍微调整了您的代码以使其正常工作，还删除了由 JavaScript 设置的内联 CSS ，因为如果没有必要，我不会推荐它。 ;)

真正“解决”问题的是：

backface-visibility: hidden;

https://www.w3schools.com/CSSref/css3_pr_backface-visibility.asp

代码示例https://jsfiddle.net/ Dave /k0q4m5jr/

HTML

<main>
   <p>Click icon</p>
    <button class="btn-toggle">
      <svg xmlns="http://www.w3.org/2000/svg" width="84.0661" height="84.0661" viewBox="0 0 22.2425 22.2425">
        <g class="sun-and-moon">
          <circle class="sun" r="4.4093" cy="11.1212" cx="11.1212" fill="currentColor" />
          <circle class="moon-shadow" r="4.4093" cy="11.1212" cx="7.5566"
            fill="#fff" />
        </g>
      </svg>
    </button>
  </main>

CSS

main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.btn-toggle {
  border: 0;
  background: inherit;
  cursor: pointer;
}

/* svg classes */
.sun-and-moon {
  backface-visibility: hidden; /* Prevents flickering */
  transform-origin: center;
  transition: transform 450ms;
  transform: scale(1) rotate(0deg);

   /* Added, to prevent inline CSS when not needed. */
  .is-active & {
    transform: scale(1.5) rotate(30deg);
  }
}
.moon-shadow {
  backface-visibility: hidden;  /* Prevents flickering */
  transform-origin: center;
  transform: translateZ(0) translateX(-15px);
  transition: transform 550ms;

   /* Added, to prevent inline CSS when not needed. */
  .is-active & {
    transform: translateX(0px);
  }
}

Javascript

const btnToggle = document.querySelector(".btn-toggle");
const moonShadow = document.querySelector(".moon-shadow");
const sunAndMoon = document.querySelector(".sun-and-moon");
const activeClass = 'is-active';

btnToggle.addEventListener("click", (event) => {
  let isActive = event.currentTarget.classList.contains(activeClass);

  if (!isActive) {
    btnToggle.classList.add(activeClass);
  } else {
    btnToggle.classList.remove(activeClass);
  }
});