CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Irwan
Irwan

Reputation: 583

Make CSS Transition Smooth for Bootstrap Toggle Menu

I was trying to made Bootstrap Toggle Menu slide effect changed from top to bottom into left to right. This is the website : http://concepthomes.com/

So after tried many CSS codes (I prefer using full CSS for this effect), I found this one :

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}

It's working, but when I clicked it, somehow the menu has "pause time", before completely opening.

Are there any ways to make the transition smoother?

=== UPDATE === So, I am using Jasny's Bootstrap (http://www.jasny.net/bootstrap/examples/navmenu/)

It has Menu slide effect called Slide In, but unfortunately it's only working for viewport below 998px. Are there any ways to 'hack' the 'offcanvas-sm' can be worked on all viewports?

Upvotes: 0

Views: 2083

Answers (1)

Natasha Lawson
Natasha Lawson

Reputation: 111

The transition-timing-function property is used to specify the speed curve of the transition effect.

The ease value has a slow start, then fast, then ends slowly, (equivalent to cubic-bezier(0.25,0.1,0.25,1))

Try the linear value which specifies a transition effect with the same speed from start to finish.

Then you could alter the transition-duration to make it the time length you're happy with.

http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

Upvotes: 1

Related Questions