据我所记,我一直没有遇到CSS3过渡效果无法正常使用的问题,直到现在。突然间(可能是因为Chrome的更新或其他代码修改)在Chrome(32.0.1700.77)中不能工作,但在所有其他浏览器(以及旧版本的Chrome)中仍然可以正常工作。
@media screen and (max-width: 1325px) {
.row-offcanvas {
position: absolute;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
width: 100%;
}
button.toggle {
display: inline-block;
}
.row-offcanvas-left,
.sidebar-offcanvas {
left: -239px;
z-index: 9999;
height: 700px;
}
.row-offcanvas-left.active {
left: 239px;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 239px;
}
}
我没有对这个网站的这部分进行任何更改,也无法解释为什么它突然不能工作。转换是针对一个面板,当点击按钮时滑出,由此位于JavaScript(不负责动画)的触发器引起。
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
-webkit-
前缀了(http://caniuse.com/css-transitions)。除此之外,没有任何功能上的改变。但是你的JS和CSS都缺少一些花括号和括号。控制台日志中是否有任何警告或错误?DOM检查器中是否有未识别的属性? - Niels Keurentjes.active
CSS定义。此外,如果所有相关代码都在这里,请随时分享链接,不允许只提供链接的问题,但是如果它是附加信息,您可以添加一个链接,在这种情况下,我看不到如何在没有链接的情况下帮助。 - Niels Keurentjes