据我所知,到目前为止,我对
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');
});
});
解决方法
您的问题是您正在尝试从未定义的属性进行动画处理：您将左侧更改为239px,但最初未将其明确指定为0.因此,它默认为auto,这是一个没有有效平滑过渡到239px的值.
向左添加：0到基本定义,你会没事的.
See a JSfiddle here demonstrating your problem in Chrome 32+.
