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;
}

任何人都知道为什么导航器正在正常移动而body / .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{}

Css过渡并不完全有效

2 个答案: