jquery - Css 转换不完全有效

Question

嘿，我希望为我的移动优先网站实现平稳过渡，但 body 一直跳到该位置而不是过渡。网址是http://868rcacs.ca/_new/

我的 JQuery

(function(){
    var body = $('body');
    $('.menu-button').bind('click', function(){
        body.toggleClass('menu-open');
        return false;
    });
})();

CSS

.menu{
position: fixed;
left: -250px;
width: 250px;
height: 100%;
background: #333;
color: #fff;
top: 0;
padding-top: 5px;
}
.body{
position: relative;
overflow-x: hidden;
left: 0px;
}
.menu-open .menu{
left: 0px;
z-index: 20;
}
.menu-open .menu-button {
position: absolute;
z-index: 20;
}
.menu-open .wrapper{
left: 0px;
}
.menu-open .overlay {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.3);
}
.menu-open, .menu{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.login-bar {
padding-bottom: 50px;
}

有谁知道为什么 nav 可以正常移动而 body/.wrapper 没有？

Answer 1

也将过渡应用到您的包装器

.wrapper {
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   transition: all 0.3s ease;
}