在Chrome上转换缩放比例，而不是在Firefox上 [英] Transform scale working on Chrome but not on Firefox
问题描述
@keyframes ripple {from {transform：scale（0）} to {transform：scale（20）}}＃square {position：relative;宽度：300px;身高：300px;溢出：隐藏;边框：1px纯红色;过渡：背景0.1s线性0.6s，变换1s; transform：rotate（0deg）;}＃fab {position：absolute;宽度：56px;身高：56px;边界半径：50％;背景：＃4FB5AB;顶部：122px;正确：0;变换：尺度（1）;过渡：变换1s;}涟漪{动画：涟漪1s 0.5s;变换：规模（20）！重要; / *持续时间 - 延迟* /过渡：变换0s 1s！important;}。animate {transform：rotate（90deg）！important;}
< 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>
在我开始解释你的代码的问题之前， - 不要一起使用转换和动画。他们通常最终导致像这样的问题这里。当元素指定一个动画时，除非有一个！重要的规则，否则它将完全控制被动画的属性。 设置。如果使用！important 设置，则该规则优先于动画。 （但不幸的是，Chrome和Firefox似乎是以不同的方式处理这种情况）。 根据 W3C规范 ：
$ b
CSS动画影响计算的属性值。在执行动画期间，属性的计算值由动画控制。这将覆盖常规样式系统中指定的值。 动画覆盖所有正常的规则，但被重要的规则覆盖。 b
重点是我的
在你的代码中，有两个问题，它们如下：
- 在
.ripple选择器中，您指定了transition-duration作为0s，这意味着根本不存在转换，并且转换的改变是即时的。正如在W3C规范中所解释的那样，Firefox似乎（正确）用！important设置来控制规则（也就是transform和transition在.ripple选择器中），所以它在指定后立即转换状态变化1s延迟 + 。 Chrome允许动画控制，从而产生你正在寻找的效果。 - Firefox似乎比Chrome更快地动画元素，所以虽然1秒的持续时间足够用于Chrome中的动画，FF需要2秒才能显示效果。
+ - 您可以通过删除规则上的！important 设置来进一步验证这一点。一旦！important> 被移除，动画就会控制。
最后，请不要使用 Once I start animating, on Chrome I get a ripple effect. My circle transform scales up. On Firefox, that exact same animation is ignored for some reason.
Before I start explaining the problem with your code, here is a word of caution - Do not use transitions and animations together. They generally end up causing problems like the one faced here. When an animation is specified on an element, it will take complete control over the properties that are being animated unless there is a rule with As per W3C Spec: CSS Animations affect computed property values. During the execution of an animation, the computed value for a property is controlled by the animation. This overrides the value specified in the normal styling system. Animations override all normal rules, but are overriden by !important rules. emphasis is mine In your code, there were two problems and they are as follows: + - You can further verify this by removing the
Finally, please do not use 这篇关于在Chrome上转换缩放比例，而不是在Firefox上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！< 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> $ b ！important 。而只是让选择器更具体。在代码片段中，我已经通过使用＃id.class 格式进行了更具体的说明。$("#animate").click(function() {
$("#square").toggleClass("animate");
$("#fab").toggleClass("ripple");
});@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;
}<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>!important setting. If !important setting is used then that rule takes precedence over the animation. (but unfortunately Chrome and Firefox seem to be handling this case differently).
.ripple selector, you were specifying the transition-duration as 0s, which means, there is no transition at all and that the change of transform is an instant one. As explained in the W3C Spec, Firefox seems to be (correctly) giving the control to the rule with !important setting (that is, the transform and transition within .ripple selector) and so it transitions the state change immediately after the specified 1s delay+. Chrome lets animation take control and thus produces the effect you are looking for.!important settings on the rules. Once !important is removed, the animation would take control.$("#animate").click(function() {
$("#square").toggleClass("animate");
$("#fab").toggleClass("ripple");
});@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);
}<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>!important unless it is mandatory. Instead just make the selector more specific. In the snippet, I have made it more specific by using the #id.class format.
