Css 转换不完全有效

Question

嘿，我希望为我的移动优先网站获得平稳过渡，但身体不断跳到该位置而不是过渡。该网站 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;
}

有谁知道为什么导航正确移动而正文/.wrapper 没有？

Answer 1

也对包装器应用过渡

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

Answer 2

我可能完全错了，但是在第一种情况下，请尝试在css中声明不带点的body：

.body{}

应该是

body{}