如何防止css关键帧动画页面加载

How to prevent css keyframe animation on page load?

本文关键字：加载 动画 关键帧 何防止 css      更新时间：2023-09-26

我有一些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

你需要做的就是:animation-play-state: paused;

然而，看看你的合作伙伴，关键帧动画可能不是你最好的最好的。看起来你只是使用关键帧来确保你的一些属性只在动画结束时改变。幸运的是，实际上有一个转换定时功能!

  1. 使用过渡属性，使用步骤结束和步骤开始的可见性和指针事件。
  2. 指针事件，用来防止与隐藏元素交互。
  3. 当隐藏时从文档流中移除对象的最大高度。

我已经把一个快速代码笔组合在一起来展示一个例子。

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

我尝试了不同的可能性。只有一个工作是通过JS使用超时和绝对定位隐藏它。

如果动画比设定的超时时间长，问题就出现了。或者动画需要在超时运行之前显示。

$('.box').css({
    'position': 'absolute',
    'top': '-9999px',
    'left': '-9999px'
});
setTimeout(function() {
    $('.box').css({
        'position': 'relative',
        'top': 'auto',
        'left': 'auto'
    });
}, 500);
相关文章：