Animation on collapsing sidebar

[MargateSteve]

I am building an admin area for a site I am working on with a collapsing sidebar.

This works fine except that I wanted it to slide in/out smoothly rather than just disappear/reappear. 

 

I tried a JS approach by setting it to 'left:-260px' when collapsed and using show/hide but this caused problems with the rest of the layout.

 

I have also tried adding 'transition: all 0.5s ease;' to the sidebar wrapper class but this did nothing either.

 

Can anyone suggest the best way to go for this? I will be setting up a right sidebar (that is hidden by default) at a later date but want to get the concept right before adding that.

 

JsFiddle

 

Regards

Steve

[maxxd]

Personally, I'd use 2 different classes with right: values, as such:

.sidbar{
	position: absolute;
	right: -250px;
        transition: right 0.5s ease;
}
.open{
	right: 0px;
}

Then use JQuery (or JavaScript) to toggle the 'open' class on and off by click() event. Adding the transition attribute will animate the div position - don't forget to use browser prefixes for this as some browsers are still playing catch-up (iPad Safari, I'm looking at you...)

[MargateSteve]

Thanks mxxd. It is working just how I want now.
 
Talking of the prefixes, as I am using less, I was planning to create some mixins to take the pain out of it, but am now considering using -prefix-free, but don't think it works with imported fonts.

 

Thanks again.

[maxxd]

Glad it's working. I haven't used -prefix-free (thanks for the link - I'll check it out!) but I am slowly building a .less library of mixins to make things like animations, transforms, and resets easier to do. It's got some limitations (my setup, not .less), but it's working for me so far...