是否有fx關閉的css3動畫等效？

是否有同等...是否有fx關閉的css3動畫等效？

$.fx.off = true;

...純CSS動畫/過渡的世界？

我正在使用jquery和css的入口動畫噸，這樣每次我改變的東西和重新加載頁面，我堅持不得不等待10秒的條目anims完成的網站上工作。這非常乏味。

來源

2013-11-14 user2777052

這將使所有動畫和過渡跳到最後一幀立即一旦啓動，同時也消除了延遲：

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

我還沒有測試過這個，但它似乎很好地適用於至少簡單的用例。隨意適應您的需求，評論和改進。

來源

2013-11-14 22:05:48

賓果，謝謝大家。 – user2777052

有沒有在全球關閉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的一個演示一個非常通用的可能性概述，但它是我能想到的唯一方法。

來源

2013-11-14 22:00:52

無法全面關閉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和檢查值：

這隻會在所有網頁運行動畫一次。

來源

2013-11-14 22:04:23 PlantTheIdea

是否有fx關閉的css3動畫等效？

回答

相關問題