非铬浏览器中的transition-delay属性 - 页面加载对CSS动画有影响吗？ [英] transition-delay property in non-chrome browser - does page loading have impact on CSS animations?

问题描述

这是因为我试图在此网站上模拟菜单项动画

CSS

  nav ul li {
 -webkit-transform：translateY ; 
 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'，' delay'：i * 150 +`ms'}）; 
}）; 
 j（'nav ul li'）。addClass（'returned'）; 
 

它在Chrome中正常工作，但在大多数其他浏览器中不能正常工作。

这里是我的网站。

我查看了 MDN 页面，并更改了JS到

  j（'nav ul li'）。not（[class * ='module']）。 function（i）{
j（this）.css（{'transition-delay'：i * 150 +'ms'，' -  webkit-transition-delay'：i * 150 +'ms' -transition-delay'：i * 150 +'ms'}）; 
}）; 
  

但它仍然不能与firefox一起使用。此外，我发现在safari，而不是 transition-delay ，内联样式变成只是 transition：xxxms 。

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

问题＃2 ：我注意到此资源处于工作草案状态，但为什么在网站上试图模仿，它适用于所有浏览器？

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

我已解决问题，虽然问题1仍然存在，另一个问题提出： / p>

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

解决方案

css

  nav ul li {
 -moz-transform：translateY ; 
 -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

在js文件中使用相同的内容-moz-，-ms-，-o- ...

$ b

This is due my attempt to imitate the menu item animation on this 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');

It works fine in chrome, but not in most other browsers.

Here is my site.

I checked the MDN page and change the JS to

  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'});
  });

but it still doesn't work with firefox. Also, I find in safari, instead of transition-delay, the inline-style becomes just transition:xxxms.

Question #1:why is safari changing the style added by my javascript?

Question #2:I noticed that this property is in "working draft" status, but why on the site I was trying to imitate, it is working for all browsers?

=====================Update==================

I've fixed the problem, although Question #1 remains, and another question raises:

Previously I execute the above JS right after the <nav> HTML. I tried executing them after document is ready, and the animation works for every modern browser, without having to add any more vendor prefixes. So page loading does have an impact on CSS animations? If so, how to workaround it? In my project, I have pretty big size pictures on the page, I don't want people with slow network to see blank nav bar when the picture is being loaded, that was why I put the JS code after <nav> instead of after document is ready, but that didn't work.

解决方案

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- for other browsers ..

same use in js file -moz- , -ms- , -o- ...

这篇关于非铬浏览器中的transition-delay属性 - 页面加载对CSS动画有影响吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！