Question

当我在我的应用程序中按下一个图标时，我正在尝试创建一个效果（颜色为圆形的黑色，在半秒内消失）;所以基本上我使用：active pseudo class并使图标上方的跨度大两倍，并且同时使图标缩小两倍（以抵消效果）。我在Chrome和IE上运行良好，但不知何故，Mozilla在：主动转换（仅仅是片刻）结束时使图标变小。我怎么能消除这个？

.collapse-btn {
     position: absolute;
     bottom: 9;
     right: 16;
     background: $white;
     border: none;
     border-radius: 50%;
    -moz-transition: background-color .5s linear;
    -webkit-transition: background-color linear;
    transition: background-color .5s linear;

   &:active{
     -moz-transform: scale(2,2);
     -webkit-transform: scale(2,2);
     transform: scale(2,2);
     background-color: #c7c7c7;

   svg {
      -moz-transform-origin: center center;
      -webkit-transform: scale(0.5,0.5);
      transform: scale(0.5,0.5);
      -moz-transform: scale(0.5,0.5);
  }
 }
}

Answer 1

解决了！这是一个很大的黑客，但有效......如果svg类是'icon'：

svg.icon {
      -moz-transform: scale(1,1)
}

不知何故，变换CSS属性不会同时应用于树的每个级别，因此在最后进行重新缩放等技巧可以解决问题。

Mozilla中的缩放元素无法正常工作

1 个答案: