I try to create sidebar component in my web appliaction with simple animation.
.sidebar-wrapper {
/* some styles */
-webkit-transition: width 0.5s ease;
-moz-transition: width 0.5s ease;
-o-transition: width 0.5s ease;
transition: width 0.5s ease;
}
This is my separated module:
https://jsfiddle.net/pyg1oh5d/7/
Looks fine, but in entire application i use Bootstrap, and then sidebar stops working. What should I change in Bootstrap styles to repair this functionality?
JSfiddle with Bootstrap:
https://jsfiddle.net/pyg1oh5d/5/
Bootstrap has a .hidden class with display:none; which is causing the problem.
Just override the display for this particular element, or use a different class name:
.sidebar-wrapper.hidden {
display: block !important;
width: 0;
}
Updated JSFiddle
Related
Is there a way to collapse the the Bootstrap Collapse plugin from horizontally instead of vertically? Looking at the code this ability doesn't seem to be built in, but I'm hoping I'm just missing something...
Any help will be greatly appreciated. Thanks!
I figured out how to do this very easily without modifying or adding any javascript.
First you define the following CSS after all Twitter Bootstrap CSS:
.collapse {
height: auto;
width: auto;
}
.collapse.height {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
.collapse.width {
position: relative;
width: 0;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
.collapse.in.width {
width: auto;
}
.collapse.in.height {
height: auto;
}
Next, on the target element (where you define the .collapse class) you need to add the class .width or .height depending on what property you want to animate.
Finally, you must wrap the contents of the target element and explicitly define its width if animating the width. This is not required if animating the height.
You can find a working example here -> http://jsfiddle.net/ud3323/ZBAHS/
With bootstrap 3.0.0, you just need to add the width class to the target element and then the following css if you want it to animate.
.collapse.width {
height: auto;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
Updated 2019
Bootstrap 4.x
Bootstrap 4 horizontal collapse transition is basically the same, expected the visible class is now .show instead of .in. It also may help to specify display:block since many elements are now display: flex.
.collapse.show {
visibility: visible;
}
4.x horizontal collapse demo
4.x sidebar demo
Also see:
Bootstrap horizontal menu collapse to sidemenu
How to slide nav bar from left instead from top?
Bootstrap 3.3.7 (original answer)
None of the existing answers worked for me. To make the collapse animation horizontal in the latest versions you need to set both transition to width, and also use visibility.
.collapse {
visibility: hidden;
}
.collapse.in {
visibility: visible;
}
.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;
}
3.x demo
In my version of bootstrap 3 (using LESS), I simply had to include this in my global less file:
.collapsing.width {
width: 0;
height: auto;
.transition(width 0.35s ease);
}
The extra class has to be width since the collapse.js looks for this class for the transition. I tried everyone else's suggestions, but they didn't work for me.
It doesn't appear to be an option for that particular plugin. It looks like you may need to modify it or hook into it somehow to get it to work that way...
After looking at the JS file for a bit I noticed a couple things. First thing is that it looks like it might be using bootstrap-transition.js ,which appears to be using CSS3 transitions. So it might be possible to write a new transition. I am not 100% certain if that is how it is working though.
Option One
My suggestion would be to either poke around in the bootstrap-collapse.js plugin file for a while and see if you can figure out how it is working.
In particular I would look at this part... bootstrap-carousel.js
this.$element[dimension](0)
this.transition('addClass', $.Event('show'), 'shown')
$.support.transition && this.$element[dimension](this.$element[0][scroll])
It looks like .transition is a callback from bootstrap-transition.js
Option Two
My second suggestion would be to just write something of your own.
My Answer
And finally my answer is that from looking at the bootstrap documentation it doesn't appear to be an option.
Some additional info:
This website seems to be doing similar stuff with CSS3 transitions.
http://ricostacruz.com/jquery.transit/
i think translateX(-100%) and translateX(0) might be the way to go rather than animating width as uses hardware acceleration correctly when supported
Good answers here, but I had to make some modifications for a cleaner, two-way transition:
.collapse.width, .collapsing {
height: 25px; /* depending on your element height */
overflow: hidden;
-webkit-transition: width 0.25s ease;
-moz-transition: width 0.25s ease;
-o-transition: width 0.25s ease;
transition: width 0.25s ease;
}
Setting a fixed height also helped prevent page "jump" as the element collapsed and expanded.
I'm attempting to create a CSS transition when an element receives a certain class. So far the toggle change works (which means that ng-class is working properly), but the animation doesn't happen.
Here's my code:
.intro-text{
height:auto;
-webkit-transition: height 200ms ease-out;
-moz-transition: height 200ms ease-out;
-o-transition: height 200ms ease-out;
transition: height 200ms ease-out;
}
.intro-text.hide{
height:0;
}
And the HTML:
<div class="intro-text" ng-class="{'hide':clicked}">
<h1>Howdy stranger!</h1>
<h3>Use the form below to search for an artist and start building your record collection!</h3>
</div>
What am I missing?
EDIT: I've narrowed the problem down to bootstrap. If I include the bootstrap.min.css, the animation doesn't work, without it, it works perfectly. Any idea why guys?
EDIT 2: Fixed it! The problem is that both .hide and .hidden are classes defined in Bootstrap, so it was overriding my styles, parsing a display:none; before the animation was visible. When changed the class to another name, it got fixed : )
Actually your issue is not about Angular + ng-class, but about a css3 transition between height: auto and height: 0.
Here is a SO question about this: http://jsfiddle.net/Y3uxy/
The solution is to do the transition on max-height instead of height, and to set max-height to something big enough.
.intro-text{
max-height:999px;
overflow: hidden;
-webkit-transition: max-height 200ms ease-out;
-moz-transition: max-height 200ms ease-out;
-o-transition: max-height 200ms ease-out;
transition: max-height 200ms ease-out;
}
.intro-text.hide{
max-height:0;
}
Here is a demonstration: http://jsfiddle.net/Y3uxy/
The title may seem little bit confusing so I draw a sketch, so you can understand more what I want to achieve: https://www.dropbox.com/s/luoiz4erg4jfk8y/howitshouldwork.png
The tab function is based on liquidslider
I've start on the transition part, but I need some help...
CSS:
li a:onClick + .bottom {
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
bottom: 400px;
}
http://jsfiddle.net/ea9VT/1/
It should not be a scroll.
Can anybody explain how this should be done?
My Suggestion is you can use Jquery for this Animation. I hope this done very simple by using JQuery animate function.
I would like to know how do you create the "delay" in Responsive design?
What I mean is, take the site awwwards.com as an example. When you reduce the width of the browser there is a bit of a delay for the site to respond.
I would of imagined the code being this:
html, body {transition: all 0.2s ease-in-out;}
but clearly it isnt (...or is it?!)
Just want to apply this effect on my own site which is Blue Harlequin
Add -webkit-transition: width 0.3s linear; to your .w css class like this
CSS:
.w {
width: 960px;
margin: 0 auto;
-webkit-transition: width 0.3s linear;
}
Because the .w is the container for all your elements so add the the transition to that class will make the layout as how you expect.
It does have transition: width 0.3s linear 0s; but it on the wrapper div.
I'm creating a simple web page and I'm having trouble adding a fade animation to the css when the background image is changed. I know I need to use something along these lines but whenever I try it, it doesn't seem to work...
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
I'll put a link to my css and html below, if anyone could take a look, I would be very grateful :)
CSS: http://pastebin.com/9k1tSiAE
HTML: http://pastebin.com/2K7GFWjN
The problem is you are changing the background image in addition to simply changing properties on the background itself. I've setup a fiddle with some random background tiles. You'll see the background slides but the image changes immediately without a transition:
http://jsfiddle.net/jimjeffers/a2jAF/
You'll need to settle on one image for the background but right now you have three:
background-image:url(nav-bg-initial.png);
background-image:url(nav-bg-secondry.png);
background-image:url(nav-bg-tertiary.png);
You'd need to condense those into one sprite. But once you apply a transition to background and adjust the background position, the background slides rather than fades. So depending on the effect you're going for - transitioning the background may not be the best option for you.
Instead -- what you may need to do is use some nested empty container elements. It's not semantically nice but it could achieve what you want if you want to use CSS transitions to perform a cross fade.
<ul id="navigation-list">
<li><a class="navigation-button" id="nav-button-1" href="#">HOME</a><span class="initial"></span><span class="secondary"></span><span class="tertiary"></span></li>
...
</ul>
The CSS then would be:
.navigation-button { position: relative; }
.initial, .secondary, .tertiary {
bottom: 0;
left: 0;
opacity: 0;
position: absolute
right: 0;
top: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
z-index: -1;
}
.initial { background-image:url(nav-bg-initial.png); }
.secondary { background-image:url(nav-bg-secondry.png); z-index: -2; }
.tertiary { background-image:url(nav-bg-tertiary.png); z-index: -3; }
And then you'd toggle their appearances like this:
#navigation-buttons:hover #nav-button-1 .tertiary { opacity: 1; }
It's a bit more work but you'd have to do something along those lines to cross fade different background images at various positions without getting a slide effect.