CODEWITHSUNDEEP
jqueryhtmlcsscss-transitions
CantFindIt
CantFindIt

Reputation: 105

Css transition not entirely working

Hey im looking to get a smooth transition for my mobile first website but the body keeps jumping to the position instead of transitioning. The site is http://868rcacs.ca/_new/

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

Anyone know why the nav is properly moving while the body/.wrapper is not?

Upvotes: 0

Views: 234

Answers (2)

Lucky Soni
Lucky Soni

Reputation: 6878

Apply transition to your wrapper as well

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

Upvotes: 3

Vincent Duprez
Vincent Duprez

Reputation: 3892

I could be completely wrong, but in the first case, try declaring body without a dot in your css : 

.body{}

should be 

body{}

Upvotes: 0

Related Questions