分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – CSS3动画填充模式polyfill，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

前言

让我们假装一个div是不透明度的动画：0;不透明度：1;我想保持不透明度：1;动画结束后@H_502_3@

这就是动画填充模式：转发;确实.@H_502_3@

@keyframes myAnimation {
    from { opacity:0; }
    to { opacity:1; }
}
div {
    opacity:0;
    animation-name:myAnimation;
    animation-delay:1s;
    animation-duration:2s;
    animation-fill-mode:forWARDs;
}
<div>just a test</div>

Run it on jsFiddle@H_502_3@

>注1：我没有包含供应商前缀来简化
>注2：这只是一个例子,请不要回答“只使用jQuery fadeIn函数”等@H_502_3@

有些事情要知道@H_502_3@

在this answer,我看到Chrome 16,Safari 4,Firefox 5支持动画填充模式.@H_502_3@

但是动画独自is supported by Chrome 1和Opera也是.因此,即使不支持填充模式,Modernizr的一般测试也可能返回正.@H_502_3@

要瞄准动画填充模式,我在Modernizr上添加了一个新的测试：@H_502_3@ @H_604_4@modernizr.addTest('animation-fill-mode',function(){ return Modernizr.testAllProps('animationFillmode'); });

现在我有一个.no-animation-fill-mode类为CSS和Modernizr.animationFillmode 为JavaScript.@H_502_3@

我也从CSS3 animations specs读到：@H_502_3@

最后,这个问题@H_502_3@

在动画结束的确切秒数下运行一个简单的jQuery函数是否可行@H_502_3@

$(document).ready(function(){
    if(!Modernizr.animation){
        $('div').delay(1000).fadeIn(2000);
    }else if(!Modernizr.animationFillmode){
        $('div').delay(3000).show();
    }
});

在CSS中：@H_502_3@

.no-animation-fill-mode div {
    animation-iteration-count:1;
}
/* or just animation:myAnimation 2s 1s 1; for everyone */

还是有什么已知的polyfill特定于动画填充模式？@H_502_3@

另外,如果我使用速记语法会发生什么@H_502_3@

animation:myAnimation 2s 1s forWARDs;

在支持动画但不是动画填充模式的浏览器上？@H_502_3@

非常感谢！@H_502_3@

解决方法

如果是我,我会尝试选择更简单的选择 – 如果可能的话.我会降级我的实现,以便我只使用通常被接受的.后来,当@L_262_35@得到更广泛的支持时,我会考虑实现它.我很少考虑使用这个@L_262_35@这是在文档页面上播放的实验技术 – 但是也许我应该被归类为无聊:)

在您的示例中,您可以通过定义最初的元素的结束状态,并使用链接的动画(如果在需要该动作之前有延迟),可以获得与animation-fill-mode相同的结果：forWARD@H_502_3@

@keyframes waitandhide {
  from { opacity:0; }
  to { opacity:0; }
}
@keyframes show {
  from { opacity:0; }
  to { opacity:1; }
}
div {
  opacity:1;
  animation: waitandhide 2s 0s,show 2s 2s;
}
<div>just a test</div>

http://jsfiddle.net/RMJ8s/1/@H_502_3@

现在,较慢的浏览器可能会将您的初始元素状态闪烁,再次隐藏它们.但是根据我的经验,我只看到这些在很老的机器上,并且有大量的css渲染页面.@H_502_3@

显然,上面这些会使你的css更多一些(因为你必须重复样式),而且在处理复杂的动画时会更复杂.然而：@H_502_3@

>它应该适用于几乎任何动画情况.
>它将避免需要JavaScript(保存$().fadeIn fallBACk).
>它将适用于支持css动画的所有浏览器.
>您不会遇到JS / CSS变得不同步的风险.@H_502_3@

关于使用短格式,最好不要如果你想要尽可能广泛的浏览器兼容性.然而,如我上面的例子所示,我选择使用短格式,因为它们更清晰,我可以理解不想长时间写(或阅读)长时间的版本.因此,我建议使用较少的生成您的css：@H_502_3@

http://lesscss.org/@H_502_3@

http://radiatingstar.com/css-keyframes-animations-with-less@H_502_3@