jquery - 页面加载后过渡不显示在 chrome 中

Question

我有一个在页面加载之前隐藏的 div。页面加载后，div 显示带有过渡。它在 Firefox 中工作，但在 chrome 中它只是停止显示。

这是链接，因此您可以在 Firefox 和 Chrome 中尝试并查看差异。

http://raulmv.com

问题应该出在 CSS 上，但它似乎是一个棘手的问题。

谢谢

哦，是的，我忘了说它可以在我的本地使用 Chrome 运行。我认为这很奇怪。

更新 解决方案

最后出于某种原因我不得不以这种方式更新脚本<​​/p>

代替这个:

<script>  
$(document).ready(function() {
  setTimeout(function() {
  $('.slider').css('visibility', 'visible');
  $('.slider').css('opacity', '1');
  $('.slider').css('max-height', '4000px');
  $('.slider').css('-webkit-transition', 'all 2s linear');
  $('.slider').css('transition', 'all 2s linear');//notice this line
    },3000);
});
</script>   

我不得不使用这个:

<script>  
$(document).ready(function() {
  setTimeout(function() {
  $('.slider').css('visibility', 'visible');
  $('.slider').css('opacity', '1');
  $('.slider').css('max-height', '4000px');
  $('.slider').css('-webkit-transition', 'all 2s ease-in-out');
  $('.slider').css('transition', 'opacity 2s ease-in-out, max-height 2s ease-in-out');//This is the line I changed
    },3000);
});
</script>  

我不确定为什么，但它现在适用于所有浏览器。

Answer 1

在 :hover 之前尝试将你的 Transition 更改为你的 Class 并添加:

#clickme_about, #clickme_work, #clickme_interests, #clickme_find_me {

transition-duration: 0.4s;
transition-property: color;

}

并从悬停中删除过渡。

也许它可以在没有简短形式的情况下工作。

(bouth 在 chrome 最新版本上对我有用)