如何在页面加载时防止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关键帧动画？

回答

相关问题