Question

当我刷新页面时，它总是在Chrome上显示<div> 0.2秒，但在Safari上则不会。即使我放了一个display none，它也会这样做。

＆＃13;

#menuheaderdrop.active i:nth-child(1) {
  -webkit-animation: inT 0.8s forwards;
  animation: inT 0.8s forwards;
}

#menuheaderdrop {
  display: none !important;
}

@-webkit-keyframes inT {
  0% {
    -webkit-transform: translateY(0px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(9px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(9px) rotate(135deg);
  }
}

@keyframes inT {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(9px) rotate(0deg);
  }
  100% {
    transform: translateY(9px) rotate(135deg);
  }
}

＆＃13;

<html>
    <body>
        <div id="menuheaderdrop">
            <i></i><i></i><i></i>
        </div>
    </body>
</html>

＆＃13;

如果有人可以提供帮助，那就太棒了！

Answer 1

这是由您的html元素后加载样式表引起的。

解决此问题的一种方法是将内联css直接添加到html元素中，然后在文档准备好后更改样式规则。

<div id="menuheaderdrop" style="display: none;">
   ...
</div>

然后，您可以使用jQuery来更改样式属性：

$(document).ready(function(){
    $('#menuheaderdrop').css('display', 'block');
}

你的css关键帧动画可能运行得太快，所以考虑为这个动画创建一个类，然后在页面完全加载时将该类添加到元素中。

.menuAnimation {
    display: block;
    animation:inT 0.8s forwards;
}

然后使用jQuery添加该类：

$(document).ready(function(){
    $('#menuheaderdrop').addClass('menuAnimation');
}

刷新页面仍显示动画？

1 个答案: