滚动条不可见，CSS3转换在MOZ中不起作用

Scrollbar not visible and CSS3 transition not working in MOZ

本文关键字：MOZ 不起作用 转换 CSS3 滚动条      更新时间：2023-10-18

我创建了一个网页，其中有两个主div和单击按钮时显示的主div。

FIDDLE。

问题是，当我单击第一个按钮时，第一个div会使用css3 transform在y-axis上移动-150%，然后出现第二个div。

当我单击第二个div上的按钮时，第二个div在y-axis上向下移动，第一个div可见。但是当第一个div可见时，滚动条就不可见了。

为了检查scrollbar在firefox中是否可见，css3 transitions在firefox中不工作。

网页中的所有内容都只能在全屏上运行。如果我调整窗口大小，所有东西的顺序都放错了位置，我也无法点击button。

有人请帮我修一下。

CSS3：

.summary-hidden {
    -webkit-animation: top 0.6s ease both;
}
.content-visible {
    -webkit-animation: top 0.6s ease both;  
}
.content-hidden {
    -webkit-animation: bottom 0.6s ease both;
}
.summary-visible {
    -webkit-animation: bottom 0.6s ease both;
    overflow-y: visible;
}
@-webkit-keyframes top {
    from {-webkit-transform: translateY(0%);}
    to {-webkit-transform: translateY(-110%);}
}
@-moz-keyframes top {
    from {-moz-transform: translateY(0%);}
    to {-moz-transform: translateY(-115%);}
}
@-webkit-keyframes bottom {
    from {-webkit-transform: translateY(-110%);}
    to {-webkit-transform: translateY(0%);}
}
@-moz-keyframes bottom {
    from {-moz-transform: translateY(-110%);}
    to {-mo-ztransform: translateY(0%);}
}

查询：

$('.button-summary').click(function() {
    $('#container').removeClass('summary-visible').addClass('summary-hidden');
    $('#content').removeClass('content-hidden hide').addClass('content-visible show');
});
$('.button-content').click(function() {
    $('#container').removeClass('summary-hidden').addClass('summary-visible')
    $('#content').removeClass('content-visible show').addClass('content-hidden hide');
});

根据我在你的小提琴上看到的情况，你实际上没有一个无前缀的

animation属性，即使您已经定义了-moz关键帧规则。

http://caniuse.com/#feat=css-动画

目前，您几乎可以将unfixed animations属性用于任何最新版本的Mozilla（根据该链接，Mozilla一直支持无前缀规范）。

值得一提的是，除非您需要支持v16之前的Firefox版本，否则您实际上不需要为关键帧规则插入-moz前缀(http://paulrouget.com/e/unprefixing-in-firefox-16/)。

就我个人而言，我甚至不会只使用-webkit和-moz，而不使用（至少）不固定版本的属性来覆盖我的基础，甚至包括-o、-ms（取决于客户端和情况）。始终确保您的CSS有一个回退，以便页面在不同的浏览器中显示得更一致。

我将动画属性的无前缀版本添加到了fiddle中，它在firefox中似乎运行得很好（我认为，这很难说，因为代码似乎没有100%完成）。

相关文章：