Question

是否有等效的......

$.fx.off = true;

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

我正在使用jquery和css进行大量输入动画的网站，这样每当我更改某些内容并重新加载页面时，我就不得不等待十秒钟才能完成输入操作。这很乏味。

Answer 1

无法全局关闭CSS动画，但是您可以使用链接来模拟动画“关闭”：

假设您的动画受到正常约束：

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

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

这样，假设您的body元素具有id（例如<body id="bodyElementID">），如果页面正常加载，则会http://example.com/page.html转换，但是如果页面加载为：http://example.com/page.html#bodyElementID，则不会发生转换。

在没有演示真实HTML的情况下，这是一种非常通用的可能性概述，但这是我能想到的唯一方法。

Answer 2

无法普遍关闭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');
        }
    });
});

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

Answer 3

这将使所有动画和转换一旦启动就立即跳到最后一帧，并消除延迟：

* {
    -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;
}

Demo

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

我还没有对它进行过全面的测试，但它似乎至少可以用于简单的用例。随意根据您的需求进行调整，评论和改进。

有没有相当于fx off的css3动画？

3 个答案: