Question

我的页面上有关于fadein / out元素的关键帧的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

Answer 1

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

但是，看看你的codepen，关键帧动画可能不是你最好的。看起来您只是使用关键帧来确保您的某些属性仅在动画结束时更改。幸运的是，实际上有一个转换计时功能！

使用transition属性，使用step-end和step-start进行可见性和指针事件。
用于防止与隐藏元素交互的指针事件。
隐藏时用于从文档流中删除对象的最大高度。

我将快速编码笔拼接在一起以显示示例。

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

Answer 2

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

如果动画长于设定的超时，则会出现问题。或者需要在超时运行之前显示动画。

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

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

如何在页面加载时阻止css关键帧动画？

2 个答案: