我创建了一个网页,其中有两个主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%完成)。