Question

这是因为我尝试模仿此site

上的菜单项动画

CSS

nav ul li{
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-transition-property:all !important ;
    transition-property:all !important ;
    -webkit-transition-duration: 800ms !important;
    transition-duration: 800ms !important;
    -webkit-transition-timing-function: cubic-bezier(0.515,.005,.515,1) !important;
    transition-timing-function: cubic-bezier(0.515,.005,.515,1) !important}
nav ul li.returned{-webkit-transform:translateY(0);transform:translateY(0)}

JS

  var j = jQuery.noConflict();
  j('nav ul li').each(function(i){
      j(this).css({'transition-delay':i*150+'ms','-webkit-transition-delay':i*150+'ms'});
  });
  j('nav ul li').addClass('returned');

它在chrome中运行良好，但在大多数其他浏览器中都不行。

这是my site.

我检查了MDN页面并将JS更改为

  j('nav ul li').not("[class*='module']").each(function(i){
      j(this).css({'transition-delay':i*150+'ms','-webkit-transition-delay':i*150+'ms','-moz-transition-delay':i*150+'ms'});
  });

但它仍然无法与Firefox一起使用。另外，我发现在safari中，而不是transition-delay，内联样式只是transition:xxxms。

问题＃1 ：为什么safari会更改我的javascript添加的样式？

问题＃2 ：我注意到这个属性在＆＃34;工作草案＆＃34;状态，但为什么the site我试图模仿，它适用于所有浏览器？

=====================更新==================

我已经解决了问题，但问题＃1仍然存在，另一个问题提出：

以前我在<nav> HTML之后立即执行上面的JS。我准备好在文档准备好后执行它们，并且动画适用于每个现代浏览器，而不必添加任何更多的供应商前缀。因此页面加载会对CSS动画产生影响吗？如果是这样，如何解决它？在我的项目中，我在页面上有相当大的图片，我不希望网络速度慢的人在加载图片时看到空白的导航栏，这就是为什么我把JS代码放在{{1}之后<而不是在文档准备好之后，但这没有用。

Answer 1

<强> CSS

nav ul li{
-moz-transform: translateY(-40px); 
-o-transform: translateY(-40px); 
-ms-transform: translateY(-40px); 
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
-moz-transition-property:all !important ;
-ms-transition-property:all !important ;
-o-transition-property:all !important ;
-webkit-transition-property:all !important ;
transition-property:all !important ;
-moz-transition-duration: 800ms !important;
-ms-transition-duration: 800ms !important;
-o-transition-duration: 800ms !important;
-webkit-transition-duration: 800ms !important;
 transition-duration: 800ms !important;
-moz-transition-timing-function: cubic-bezier(0.515,.005,.515,1) !important;
-ms-transition-timing-function: cubic-bezier(0.515,.005,.515,1) !important;
-o-transition-timing-function: cubic-bezier(0.515,.005,.515,1) !important;
-webkit-transition-timing-function: cubic-bezier(0.515,.005,.515,1) !important;
transition-timing-function: cubic-bezier(0.515,.005,.515,1) !important
}



nav ul li.returned{
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
-o-transform:translateY(0);
-moz-transform:translateY(0);
transform:translateY(0)
}

-moz-， - ms - ， - o-用于其他浏览器..

在js文件中同样使用-moz - ， - ms - ， - o- ...

非Chrome浏览器中的transition-delay属性 - 页面加载是否会对CSS动画产生影响？

1 个答案: