我有一个隐藏到页面加载的 div。一旦页面加载了带有过渡的 div 显示。它在 Firefox 中有效,但在 chrome 中它只是停止显示。
这是链接,因此您可以在 Firefox 和 Chrome 中尝试并查看差异。
问题应该出在 CSS 上,但它似乎是一个棘手的问题。
谢谢
哦,是的,我忘了说它可以在我的本地使用 Chrome。我觉得这很奇怪。
更新 解决方案
最后由于某种原因我不得不以这种方式更新脚本
而不是这个:
<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>
我不确定为什么,但它现在适用于所有浏览器。