1

有没有等价的...

$.fx.off = true;

...在纯 CSS 动画/过渡的世界中？

我正在一个使用 jquery 和 css 拥有大量入口动画的网站上工作，这样每次我更改某些内容并重新加载页面时，我都不得不等待十秒钟才能完成入口动画。这很乏味。

4

3 回答 3

0

There's no way of globally turning off CSS animations, however you could use a link to simulate animations being 'turned off':

Assuming your animations are bound normally:

body .elementClassName {
    transition: propertyName 10s linear;
}

body:target .elementClassName {
    transition: none;
    transition: propertyName 0 linear;
}

This way, assuming that your body element has an id (for example <body id="bodyElementID">), if the page is loaded normally, at http://example.com/page.html transitions will occur, however if the page is loaded as: http://example.com/page.html#bodyElementID the transitions will not occur.

This is, without a demonstration of your real HTML a very generic overview of the possibility, but it's the only way I can think of.

于 2013-11-14T22:00:52.263 回答
0

没有办法普遍关闭 CSS 动画。

如果您想做这样的事情，请将动画片段放在单独的 CSS 类中：

.AnimationOfWhatever {
    -webkit-animation: entryAnimation 10s;
    -moz-animation: entryAnimation 10s;
    -o-animation: entryAnimation 10s;
    -ms-animation: entryAnimation 10s;
    animation: entryAnimation 10s;
}

并通过 jQuery 在您的第一次加载时应用该类（因为您提到了 jQuery）。

$('.ElementToAnimate').one('load',function(){
    $(this).addClass('AnimationOfWhatever');
});

这只会加载一次动画。如果您只想添加该类一次，请创建 localStorage 值并检查该值：

$(function(){
    if(localStorage['loaded'] === undefined){
        localStorage['loaded'] = 'true';
    }

    $('.ElementToAnimate').on('load',function(){
        if(!JSON.parse(localStorage['loaded'])){
            $(this).addClass('AnimationOfWhatever');
        }
    });
});

这只会在所有页面上运行一次动画。

于 2013-11-14T22:04:23.620 回答
0

这将使所有动画和过渡在开始后立即跳到最后一帧，并且还消除了延迟：

* {
    -webkit-animation-duration: 0s !important;
    animation-duration: 0s !important;
    -webkit-animation-delay: 0s !important;
    animation-delay: 0s !important;

    -webkit-transition-duration: 0s !important;
    transition-duration: 0s !important;
    -webkit-transition-delay: 0s !important;
    transition-delay: 0s !important;
}

演示

要以编程方式应用它，请将选择器更改为.no-anim *并将no-anim类应用于<html>（或另一个包含元素）。演示

我还没有完全测试过这个，但它似乎至少适用于简单的用例。随意调整它以适应您的需求、评论和改进。

于 2013-11-14T22:05:48.950 回答