Question

我创建了一个网页，其中包含两个主要的div，以及按钮点击时显示的内容。

问题是，当我点击第一个按钮时，第一个div在y-axis上使用css3 transform移动-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%);}
}

JQUERY：

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

Answer 1

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

动画属性，即使你已经定义了-moz-keyframes规则。

http://caniuse.com/#feat=css-animation

目前，您可以使用无前缀动画属性几乎任何最新版本的Mozilla（根据该链接始终支持spec sans-prefix）。

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

就我个人而言，我甚至不会使用-webkit和-moz而不用（至少）无限制版本的属性覆盖我的基础，甚至包括-o，-ms（取决于客户端和情况）。始终确保您的CSS具有后备功能，以便页面在不同浏览器中更加一致地显示。

我将动画属性的非前缀版本添加到小提琴中，它似乎在firefox中运行得很好（我认为，因为代码似乎没有100％完成，所以很难说）。

滚动条不可见，CSS3过渡在MOZ中不起作用

1 个答案: