一旦我开始制作动画,我就会在 Chrome 上获得链式 react 。我的圈子变换扩大了。在 Firefox 上,完全相同的动画由于某种原因被忽略了。
$("#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>
最佳答案
在我开始解释您的代码的问题之前,请注意一点——不要同时使用过渡和动画。它们通常最终会导致问题,例如所面临的问题 here .
当在元素上指定动画时,它将完全控制正在动画化的属性,除非有带有 !important
设置的规则。如果使用 !important
设置,则该规则优先于动画。 (但不幸的是,Chrome 和 Firefox 似乎以不同的方式处理这种情况)。
根据 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.
重点是我的
在你的代码中,有两个问题,它们如下:
- 在
.ripple
选择器中,您将transition-duration
指定为0s
,这意味着根本没有过渡变换的变化是瞬间的。正如 W3C 规范中所解释的那样,Firefox 似乎(正确地)通过!important
设置(即transform
和transition
在.ripple
选择器中),因此它会在指定的1s
延迟+ 后立即转换状态变化. Chrome 允许动画控制,从而产生您正在寻找的效果。 - Firefox 似乎比 Chrome 更快地为元素设置动画,因此虽然 1 秒的持续时间对于 Chrome 中的动画来说已经足够,但 FF 需要 2 秒才能更慢并显示效果。
+ - 您可以通过删除规则中的 !important
设置来进一步验证这一点。一旦 !important
被移除,动画就会控制。
$("#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
,除非它是强制性的。相反,只是让选择器更具体。在代码片段中,我使用 #id.class
格式使其更加具体。
关于css - 变换比例适用于 Chrome 但不适用于 Firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34984456/