如何在頁面加載時防止css關鍵幀動畫？

我有一些關於我的網頁上的淡入淡出元素的CSS動畫。問題是當我加載頁面時顯示淡出動畫。如何在頁面加載時防止css關鍵幀動畫？

HTML：

<button class="toggle-good">Toggle display</button> 
<p class="box">I move nicely!</p>

CSS：

.box { 
    height: 0; 
    opacity: 0; 
    animation: FadeOut 1s ease-in-out; 
} 
.box.active { 
    height: initial; 
    opacity: 1; 
    animation: FadeIn 1s ease-in-out; 
} 
@keyframes FadeIn { 
    0% { 
    opacity: 0; 
    height: initial; 
    } 
    100% { 
    opacity: 1; 
    height: initial; 
    } 
} 
@keyframes FadeOut { 
    0% { 
    opacity: 1; 
    height: initial; 
    } 
    99% { 
    opacity: 0; 
    height: initial; 
    } 
    100% { 
    height: 0; 
    opacity: 0; 
    height: 0; 
    } 
}

JS：

$('button').on('click', function(e) { 
    $(this).siblings('.box').toggleClass('active'); 
})

工作例如： http://codepen.io/MickL/pen/LkvWaA

來源

2016-08-19 Mick

的可能的複製[如何防止CSS關鍵幀動畫在網頁加載運行？]（http://stackoverflow.com/questions/27938900/how-to-prevent-css-keyframe-animation-在頁面加載時運行） –

根據你想要做的事情來判斷，你可能會因爲簡單的轉換而變得更好。 –

但是我想在淡出動畫之後將高度更改爲0。 – Mick

所有你應該需要做的是： animation-play-state: paused;

然而，在看看你的codepen，關鍵幀動畫，可能不是你最好的最好的。看起來你只是使用關鍵幀來確保你的一些屬性只在動畫結束時纔會改變。幸運的是，這其實有一個轉換計時功能！

使用transition屬性，使用step-end和step-start顯示可見性和指針事件。
用於防止與隱藏元素交互的指針事件。
最大高度用於在隱藏時從文檔流中移除對象。

我把一個快速代碼筆放在一起來展示一個例子。

http://codepen.io/SudoCat/pen/LkvyEJ?editors=0100

來源

2016-08-19 09:36:03

感謝您的回答。我無法使用指針事件，因爲我在滾動時切換動畫。我只是用這個例子中的一個按鈕來保持簡單。 – Mick

指針事件屬性將阻止人們在隱藏時與該塊進行交互 - 它不應該影響滾動時切換動畫。 –

經過一番思考，我意識到顯示器：我原來提到的none技術是行不通的。相反，我在轉換中添加了max-height屬性以從文檔流中移除對象。 –

我嘗試了迪菲租賃可能性。只有一個工作是通過JS使用超時和絕對定位來隱藏它。

問題是如果動畫比設置的超時時間長。或者在超時運行之前需要顯示動畫。

$('.box').css({ 
    'position': 'absolute', 
    'top': '-9999px', 
    'left': '-9999px' 
}); 

setTimeout(function() { 
    $('.box').css({ 
     'position': 'relative', 
     'top': 'auto', 
     'left': 'auto' 
    }); 
}, 500);

來源

2016-08-19 09:15:10 Mick

如何在頁面加載時防止css關鍵幀動畫？

回答

相關問題