Question

一旦我开始制作动画，Chrome就会产生涟漪效应。我的圆形变换向上扩展。在Firefox上，出于某种原因会忽略完全相同的动画。

＆＃13;

$("#animate").click(function() {
  $("#square").toggleClass("animate");
  $("#fab").toggleClass("ripple");
});

＆＃13;

@keyframes ripple {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(20)
  }
}
#square {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border: 1px solid red;
  transition: background 0.1s linear 0.6s, transform 1s;
  transform: rotate(0deg);
}
#fab {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #4FB5AB;
  top: 122px;
  right: 0;
  transform: scale(1);
  transition: transform 1s;
}
.ripple {
  animation: ripple 1s 0.5s;
  transform: scale(20) !important;
  /*Duration - delay */
  transition: transform 0s 1s !important;
}
.animate {
  transform: rotate(90deg) !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="square">
  <div id="fab"></div>
</div>
<br />
<button id="animate">animate</button>

＆＃13;

CodePen Demo

Answer 1

在我开始解释代码问题之前，请注意一点 - 不要一起使用过渡和动画。它们通常最终导致像here那样的问题。

在元素上指定动画时，除非存在!important设置的规则，否则它将完全控制正在设置动画的属性。如果使用!important设置，则该规则优先于动画。（但不幸的是，Chrome和Firefox似乎以不同的方式处理这种情况。）

根据W3C Spec：

CSS动画会影响计算属性值。在执行动画期间，属性的计算值由动画控制。这将覆盖正常样式系统中指定的值。 动画会覆盖所有正常规则，但会被！重要规则覆盖。

^{重点是我的}

在您的代码中，有两个问题，它们如下：

在.ripple选择器中，您将transition-duration指定为0s，这意味着根本没有转换，并且转换的更改是即时转换。正如在W3C规范中所解释的那样，Firefox似乎（正确地）通过!important设置（即transform和transition选择器内的.ripple来控制规则）因此它会在指定的1s延迟⁺之后立即转换状态更改。 Chrome可让动画获得控制权，从而产生您正在寻找的效果。
Firefox似乎比Chrome更快地为元素制作动画，因此，对于Chrome中的动画，持续时间为1秒就足够了，FF需要2秒才能更慢并显示效果。

⁺ - 您可以通过删除规则上的!important设置进一步验证这一点。移除!important后，动画将获得控制权。

＆＃13;

$("#animate").click(function() {
  $("#square").toggleClass("animate");
  $("#fab").toggleClass("ripple");
});

＆＃13;

@keyframes ripple {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(20)
  }
}
#square {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border: 1px solid red;
  transition: background 0.1s linear 0.6s, transform 1s;
  transform: rotate(0deg);
}
#fab {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #4FB5AB;
  top: 122px;
  right: 0;
  transform: scale(1);
  transition: transform 1s;
}
#fab.ripple {
  animation: ripple 2s 1s;
  transform: scale(20);
  /*Duration - delay */
  transition: transform 1s 1s;
}
#square.animate {
  transform: rotate(90deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="square">
  <div id="fab"></div>
</div>
<br />
<button id="animate">animate</button>

＆＃13;

最后，除非是强制性的，否则请不要使用!important 。相反，只需使选择器更具体。在代码段中，我使用#id.class格式使其更具体。

转换比例适用于Chrome，但不适用于Firefox

1 个答案: