Question

所以当你点击一个FAB时，我有一个很酷的小径向菜单。它花了很多动画和反复试验，特别是因为我是一个菜鸟，但最终它按照我的意愿工作。但是我最近意识到我添加到我的一个：活动属性的转换（3px，3px）不起作用。这对我来说非常令人费解，因为完全相同的动画被添加到FAB中并且在那里工作正常。你可以在这里看到整个事情：（https://codepen.io/BGGrieco/pen/EmzRLw?editors=0100），我注释掉了影子动画，它可以引起人们注意翻译（3px，3px）不会发生的事实。
哪些有效，哪些无效的相关代码：

#fab
{
  position: absolute;
  color: white;
  font-size: 26px;
  text-align: center;
  width: 100%;
  height: 15%;
  background-color: #6eadea;
  border-radius: 50%;
  box-shadow: 6px 10px 18px #686868;
  display: none;
  z-index: 1;
}

#fab:active
{
  transform: translate(3px, 3px);
  box-shadow: 4px 6px 12px #585858;
}

^工作正常^

#top
{
  position: absolute;
  top: 0%;
  left: 34.5%;
  color: black;
  font-size: 26px;
  text-align: center;
  border-radius: 50%;
  width: 30%;
  height: 30%;
  background-color: #ffffff;
  box-shadow: 6px 16px 24px #999999;
}

#top:active
{
  transform: translate(3px, 3px);
  /*box-shadow: 6px 10px 18px #686868; COMMENTED THIS OUT TO FOCUS ON PROBLEM*/
}

^ Nada，nej，niet，zilch ^

我向互联网上帝祈祷，我不会因为完全忘记某个地方的逗号或分号而愚弄自己（再次）。

Answer 1

转换：translate不会处理该元素，因为该元素在其上设置了另一个内联转换样式，并且内联样式（通常）优先于CSS中定义的样式。看看Chrome Inspector：

看起来你是在Javascript中设置它。记住，所有的变换属性都是一个，所以如果你需要像scale和translate这样的多个变换，那就变成了：

transform: translate(3px, 3px) scale(0, 0);

您无法使用当前的Javascript覆盖转换属性，我建议您将该比例放在CSS中。

Answer 2

hye brian，遗憾的是我不知道为什么这不能按预期工作，解决方案可能正在使用margin-top: 3px; margin-left: 3px;？它适用于您的codepen。我不知道这对你来说是否足够，如果你想让我深入挖掘，请告诉我; p

CSS translate（）属性不起作用：活动选择器

2 个答案: