Javascript、动态 CSS 和转换

Question

我的 JavaScript 有问题。我需要使用 .classeName = "..." 动态更改 div 的类，但它不会自行更新。例如，我在课堂上添加了一个变换。它进行了缩放并设置了变换原点，但我的屏幕上没有出现任何内容。这是我的代码：

var panier = document.getElementById("panier");

if (panier.style.display == "none" || panier.style.display == "")
{
    panier.className = "";
    panier.style.display = "block";
    panier.style.webkitTransform = "scale(0, 0)";
}

if (panier.className.search("enleverPanier") >= 0)
    panier.className += panier.className.replace("enleverPanier", "afficherPanier");
else
    panier.className += " afficherPanier";

如您所见，我的班级 afficherPanier 做了一个 scale(1,1)。 div 保持我设置的 scale(0,0) 以防 div 不可见。

这是我的CSS

.afficherPanier {
 -webkit-transform-origin: left top;
 -moz-transform-origin: left top;
  -ms-transform-origin: left top;
   -o-transform-origin: left top;
      transform-origin: left top;

 -webkit-transform: scale(1, 1);
 -moz-transform: scale(1, 1);
 -ms-transform: scale(1, 1);
 -o-transform: scale(1, 1);
    transform: scale(1, 1);}

你知道为什么 scale(1,1) 不起作用吗？ 谢谢！ :)

Answer 1

现在我很确定 className 正在更改为 enleverPanierafficherPanier。要解决此问题，请尝试更改

panier.className += panier.className.replace("enleverPanier", "afficherPanier");

到

panier.className = panier.className.replace("enleverPanier", "afficherPanier");