I'm basically trying to make popups appear from the element they were clicked, similar to Angular Material Dialogs here. I know how to do transitions by adding and removing classes but what about when you want to work with styles that are calculated dynamically and need to be set through javascript. This doesn't seem to work.
See plunkr
$(document).ready(function(){
$(document).on("click", ".heading" , function(ev){
var el = $(this);
var offset = el.offset();
$(".popup").css("top", offset.top);
$(".popup").css("left", offset.left);
$(".popup").addClass("visible");
});
$(".close").on("click", function(ev){
$(".popup").removeClass("visible");
});
});
.heading{ width:100px; height:40px; background-color:grey; margin:50px 0 150px 0; padding:10px; }
.popup{
background-color:grey;
position:absolute;
height:0
width:0; opacity:0;
-webkit-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s
ease-out, top 0.3s ease-out, left 0.3s ease-out;
-moz-transition:
opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top
0.3s ease-out, left 0.3s ease-out; -ms-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s
ease-out, left 0.3s ease-out;
-o-transition: opacity 0.5s ease-out,
width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left
0.3s ease-out; }
.popup.visible{ opacity:1; height:250px; width:400px;
top:400px !important; left:200px !important; }
.close:hover{cursor:pointer;}
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="heading">click me 1st </div>
<div class="heading">click me 2nd</div>
<div class="heading">click me 3rd</div>
<div class="popup">
ttttttttttttttttttttttttttttttttttttttttttttttttttttttt
<div style="margin:40px" class="close">close</div>
</div>
</body>
</html>
The way it should be is it transitions from the div you clicked on, ends on the center and when you close it transitions back the div you clicked on.
The way it actually is is: clicking the first div makes the popup appear where it's supposed to end. After this point the transition (top and bottom ones) always seem to be one step behind. If you click the 2nd div the transition starts from where it ended before i.e the previous div(which is wrong, it should start from the div you clicked) and ends in the middle, which is also correct. When you hit close it goes back to the correct div.
Is there some way around this? Tell the engine to update values manually or may be edit classes through javascritp? Any help would be appreciated.
Thanks
Transition according to google is:
the process or a period of changing from one state or condition to
another.
To have a transition you have to start with one state, and change it to another state. However, the state needs to be gradual, which means that you've got to wait a bit after setting the 1st state.
When you do this, you set the start top and left and then override them immediately using the visible class.
Note - I've changed the dimensions a bit, to fit the SO examples area. You can find the example with original dimensions here.
$(".popup").css("left", offset.left);
$(".popup").addClass("visible");
To prevent that, use a delay. I've used requestAnimationFrame.
I've also added cleanup for the top and left settings, after the popup closes.
$(document).on("click", ".heading", function(ev) {
var offset = $(this).offset();
var $popup = $(".popup");
//set the starting point
$popup.css({
top: offset.top,
left: offset.left,
visibility: 'visible'
});
//wait and start the show animation
requestAnimationFrame(function() {
$popup.addClass("visible");
});
});
$(".close").on("click", function(ev) {
var $popup = $(".popup");
$popup
//only when the hide animation ends we reset the popup
.one('transitionend', function() {
$popup.css({
top: '',
left: '',
visibility: 'hidden'
});
})
//start the hide animation
.removeClass("visible");
});
h1 {
color: red;
}
.heading {
width: 100px;
height: 40px;
background-color: grey;
margin: 50px 0;
padding: 10px;
}
.popup {
background-color: grey;
position: absolute;
height: 0;
width: 0;
opacity: 0;
overflow: hidden;
-webkit-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-moz-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-ms-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-o-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
}
.popup.visible {
opacity: 1;
height: 150px;
width: 200px;
top: calc(50% - 75px) !important;
left: calc(50% - 100px) !important;
}
.close:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="heading">heading 1</div>
<div class="heading">heading 2</div>
<div class="heading">heading 3</div>
<div class="popup">
rghe;roigegrh'ragjh oewighe ergj ergj rrgj ger[
<div style="margin:40px" class="close">close</div>
</div>
use below mentioned CSS code
.heading {
width: 100px;
height: 40px;
background-color: grey;
margin: 50px 0 150px 0;
padding: 10px;
}
.popup {
background-color: grey;
position: absolute;
height: 0;
width: 0;
opacity: 0;
-webkit-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-moz-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-ms-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-o-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
}
.popup.visible {
opacity: 1;
height: 250px;
width: 400px;
top: 400px !important;
left: 200px !important;
}
.close:hover {
cursor: pointer;
}
Related
i have a logo image in sticky topbar menu so when scrolling down i'm trying to change the image width using css transition but it is not working with jquery window scroll when i add the css class to logo image but when i hover on the logo image it work
my code css
.logo img
{
width: 100%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
.transition , .logo img:hover{
width: 50%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
js code
$j = jQuery.noConflict();
$j(function(){
$j(window).on("scroll", function () {
if ($j(this).scrollTop() > 100) {
$j('.logo img').addClass('transition');
console.log($j(this).scrollTop());
} else {
$j('.logo img').removeClass('transition');
console.log('cvc');
}
});
});
please any help and many thanks in advance.
You wants something like this ?
Just changed your selectors a bit. Because of the inheritance of .logo img, .transition wasn't suffisant to erase .logo img properties.
.logo img
{
width: 100%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
.logo .transition{
width: 50%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
I'm rebuilding someone's else CSS3 transition to make it work across Safari, Chrome, and Firefox. In their version (mouse over the package images), the transition works well in Safari, but not in the other two: The elements get stuck in the "up" position. In my version, the transition runs smoothly in FF and Chrome, but is jerky in Safari (plus it's not rotating). Any ideas? My CSS is below.
.package-down {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: 0 0 0 0;
transform: rotate(0deg) ;
-webkit-transition: margin .1s ease, transform .25s ease;
-moz-transition: margin .1s ease, transform .25s ease;
-o-transition: margin .1s ease, transform .25s ease;
transition: margin .1s ease, transform .25s ease;
}
.package-up {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: -50px 0 0 0;
transform: rotate(-2deg);
-webkit-transition: margin .1s ease, transform .25s ease-out;
-moz-transition: margin .1s ease, transform .25s ease-out;
-o-transition: margin .1s ease, transform .25s ease-out;
transition: margin .1s ease, transform .25s ease-out;
}
While I agree that jQuery is not necessary for this problem, the real issue appears to be an inconsistent use of browser prefixes.
You needed to add prefixes for transform: rotate() on both .package-down and .package-up.
Also this:
-webkit-transition: margin .1s ease, transform .25s ease-out;
Should be this:
-webkit-transition: margin .1s ease, -webkit-transform .25s ease-out;
And it would be a similar adjustment for all the other prefixed transition properties.
See Codepen
$(function() {
$('.package-down').hover(function() {
$('.package-down').toggleClass('package-up');
});
});
img {
margin: 0;
max-width: 100%;
}
.main-packages-wrapper {
position: relative;
width: 80%;
min-height: 575px;
display: block;
padding-top: 80px;
z-index: 1; }
.package.original {
margin-right: -15px;
margin-left: -15px;
z-index: 2; }
.package.original img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.package-down {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: 0 0 0 0;
-webkit-transform: rotate(0deg) ;
-moz-transform: rotate(0deg) ;
-o-transform: rotate(0deg) ;
transform: rotate(0deg) ;
-webkit-transition: margin .1s ease, -webkit-transform .25s ease;
-moz-transition: margin .1s ease, -moz-transform .25s ease;
-o-transition: margin .1s ease, -o-transform .25s ease;
transition: margin .1s ease, transform .25s ease;
}
.package-up {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: -50px 0 0 0;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
-webkit-transition: margin .1s ease, -webkit-transform .25s ease-out;
-moz-transition: margin .1s ease, -moz-transform .25s ease-out;
-o-transition: margin .1s ease, -o-transform .25s ease-out;
transition: margin .1s ease, transform .25s ease-out;
}
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<body>
<div class="primary-content">
<section class="main-packages-wrapper">
<div class="package-down multigrain">
<img src="http://www.batterworld.com/wp-content/themes/batterworld/images/package_multigrain.png">
</div>
</section>
</div><!--END PRIMARY CONTENT-->
I'm actually astonished that your jQuery hover function does work at all, because what you'd actually need is mouseenter -> addClass and mouseleave -> removeClass, but it might be me not exactly being aware of how jQuery's .hover() works.
Nonetheless, there is absolutely no need for jQuery or even Javascript to change styles on mouseover. You have the pseudo-selector :hover for exactly this purpose: Put the styles your want to transition to into
.package-down:hover { /* properties to transition to */ }
Next, do not repeat styles that the element already has and that do not change.
Last, if your problem is that not all property transition are taking an equal amount of time, don't specify so:
transition: margin .1s ease, transform .25s ease-out;
This will make the margin changes take 0.1s, but the rotation to take 0.25s.
Please describe more concisely what your transition is to look/perform like.
http://codepen.io/anon/pen/aOJmKe
Also, please be aware that you are not doing a css animation here, but a css transition. Read more about the differences here:
CSS: Animation vs. Transition
Yup, the javascript was definitely extraneous. All that was needed were CSS transitions applied to the :hover state of the elements. I did end up repeating some transition code, because that enabled the transitions to run in reverse when the cursor leaves the hovered element. Thanks! Finished codepen here.
.package.original img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
}
.package {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.33%;
z-index: 1;
-webkit-transition: margin .15s ease-out;
-moz-transition: margin .15s ease-out;
-o-transition: margin .15s ease-out;
transition: margin .15s ease-out;
}
.package:hover {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.33%;
z-index: 1;
margin: -50px 0 0 0;
-webkit-transform: rotate(-2deg);
-webkit-transition: margin .15s ease-out;
-moz-transition: margin .15s ease-out;
-o-transition: margin .15s ease-out;
transition: margin .15s ease-out;
}
.original:hover{
margin-left: -30px;
-webkit-transition: margin .15s ease-out;
-moz-transition: margin .15s ease-out;
-o-transition: margin .15s ease-out;
width: 33.33%;
z-index: 2;
}
HTML:
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1"onclick="checklist(this)"><button onclick="myFunction()">AA</button></li>
<li id="item2"><button onclick="myFunction2()">A </button></li>
<li id="item3">B </li>
<li id="item4">C </li>
<li id="item5">D </li>
<li id="item6">E </li>
<li id="item7">F </li>
</ul>
</div>
CSS:
lu, li{
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu{
width:150px;
height: 350px;
margin:0 auto;
}
.menu li{
position: relative;
top:150px;
bottom: 0;
right: 0;
margin: auto;
border-style:none;
}
//animation
#item7{
transition: opacity .8s, left .8s ease-out;
-moz-transition: opacity .8s, left .8s ease-out;
-webkit-transition: opacity .8s, left .8s ease-out;
-o-transition: opacity .8s, left .8s ease-out;
}
#item6{
transition: opacity 1s, left 1s ease-out;
-moz-transition: opacity 1s, left 1s ease-out;
-webkit-transition: opacity 1s, left 1s ease-out;
-o-transition: opacity 1s, left 1s ease-out;
}
#item5{
transition: opacity 1.2s, left 1.2s ease-out;
-moz-transition: opacity 1.2s, left 1.2s ease-out;
-webkit-transition: opacity 1.2s, left 1.2s ease-out;
-o-transition: opacity 1.2s, left 1.2s ease-out;
}
#item4{
transition: opacity 1.4s, left 1.4s ease-out;
-moz-transition: opacity 1.4s, left 1.4s ease-out;
-webkit-transition: opacity 1.4s, left 1.4s ease-out;
-o-transition: opacity 1.4s, left 1.4s ease-out;
}
#item3{
transition: opacity 1.6s, left 1.6s ease-out;
-moz-transition: opacity 1.6s, left 1.6s ease-out;
-webkit-transition: opacity 1.6s, left 1.6s ease-out;
-o-transition: opacity 1.6s, left 1.6s ease-out;
}
#item2{
transition: opacity 1.8s, left 1.8s ease-out;
-moz-transition: opacity 1.8s, left 1.8s ease-out;
-webkit-transition: opacity 1.8s, left 1.8s ease-out;
-o-transition: opacity 1.8s, left 1.8s ease-out;
}
#item1{
transition: opacity 2s, left 2s ease-out;
-moz-transition: opacity 2s, left 2s ease-out;
-webkit-transition: opacity 2s, left 2s ease-out;
-o-transition: opacity 2s, left 2s ease-out;
}
I want to animate this menu which is centered in the middle of my website, to go to the ultimate left in this form / ,it works however when i resize the window the menu isn't responsive, it doesn't remain in the middle of the screen. Any help?
I don't know whether I understood your question correctly,
Please checkout this style and let me know this satisfy your needs.
lu, li{
list-style-type: none;
font-size: 1.5em;
text-align: center;
border-style: none;
}
.menu{
width:150px;
height: 350px;
margin:0 auto;
}
.menu li{
position: relative;
top:150px;
margin: 0 auto;
border-style:none;
}
So I'm struggling with hover effect. The black box is the image and I want the red mask color (which has the same width and height) to be placed in front of the black box whenever user will hover on that image, I cannot do this because it seems the effect is under the image whenever I hover mouse on that image....
.third-effect .mask {
opacity: 0;
overflow: visible;
border: 100px solid rgba(0, 0, 0, 0.7);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
width: 274px;
height: 197px;
}
.third-effect a.info {
position: relative;
top: -10px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
opacity: 1;
border: 100px solid rgba(0, 0, 0, 0.7);
}
.third-effect:hover a.info {
opacity: 1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<section class="module content">
<div class="view third-effect">
<img src="images/chronos.png" />
<div class="mask">
Full Image
</div>
</div>
</div>
</div>
In your css, you can use the :hover selector to modify the style of your element when your mouse hovers it.
Take a look at this example to see how you can use it.
http://jsfiddle.net/wof159fh/
.third-effect .mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
width:274px;
height:197px;
}
.third-effect a.info {
position:relative;
top:-10px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out; }
.third-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
opacity:1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<section class="module content">
<div class="view third-effect">
<img src="images/chronos.png" >
<div class="mask">
Full Image
</div>
</div>
</div>
</div>
You can do it this way
#image {
background-image: url('http://lorempixel.com/400/200/');
width: 300px;
background-size: cover;
height: 300px;
}
#image:hover {
background-color: red;
background-image: none;
}
<div id="image"></div>
Im not sure if you want the overlaid div to be clickable or what. You can use javascript to set stuff up. So you can add a transparent color to the "hover" which would mask it in some color. ex: set opacity 0.8 with red.
Also there is the approach i did. http://jsfiddle.net/kv0fsLs2/
<div id="outer">
<div id="image"></div>
<div id="hover"></div>
</div>
#image {
background-color:red;
}
#hover {
position:absolute;
background-color: blue;
}
div > div {
width: 100px;
height: 100px;
top: 0px;
left: 0px;
}
#outer {
position:relative;
left: 250px;
top: 250px;
}
this way you can tie a click handler to the overlaid div, if you didnt want to do it to the actual item.
Edit: Here you can see it using opacity.... http://jsfiddle.net/kv0fsLs2/1/ All you would need to do is have the image be there instead of a red background as i did in the simplest of examples.
Edit 2: Here is another fiddle, actually using an image: http://jsfiddle.net/kv0fsLs2/2/
I have Bootstrap grid of two columns. Full jsfiddle code here.
The problem with the animation applied using this code:
CSS:
.row-fluid div {
-webkit-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
-moz-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
-o-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}
When showing/toggling the left column, the right column flickers and pops from bottom to top besides the left columns while stretching.
If I just disable this CSS there is no animation and the process is not noticed as they switch fast.
How to add animation without showing the columns flickers.
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Examples for bootstrap-slider plugin">
<meta name="author" content="">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.row-fluid div {
-webkit-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
-moz-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
-o-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}
#col1 {
background-color: #A6BFBA;
}
#col2 {
background-color: #DE4124;
}
#trig {
margin: 50px;
}
.row-fluid .col-0 + [class*="col"]{
margin-left: 0;
}
#media all and (max-width:768px) {
.col-0 {
width:0;
padding:0;
overflow:hidden;
float:left;
display:none;
}
}
</style>
<div class="container-fluid">
<div class="row-fluid">
<div id="col1" class="col-xs-3 col-md-3">
Left Column text here<br/>
Left Column text here<br/>
Left Column text here<br/>
Left Column text here<br/>
Left Column text here<br/>
Left Column text here<br/>
Left Column text here<br/>
Left Column text here<br/>
Left Column text here<br/>
Left Column text here<br/>
Left Column text here<br/>
</div>
<div id="col2" class="col-xs-9 col-sm-9">
<a id="trig" class="btn btn-primary visible-xs">Reflow Me</a><br/>
Right Column text here<br/>
Right Column text here<br/>
Right Column text here<br/>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#trig').on('click', function () {
$('#col1').toggleClass('col-0');
$('#col2').toggleClass('col-xs-12 col-xs-9');
});
});
</script>
</body>
</html>
try this
Sorry, small correction in order to make the animation smoother:
fiddle code - live example
CSS:
.row-fluid {
overflow:hidden;
}
.row-fluid div {
-webkit-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
-moz-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
-o-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}
#col1 {
background-color: #A6BFBA;
}
#col2 {
background-color: #DE4124;
}
#trig {
margin: 50px;
}
.row-fluid .col-0 + [class*="col"]{
margin-left: 0;
}
.offcanvas {
margin-left:0;
}
#media all and (max-width:768px) {
.col-0 {
width:0;
padding:0;
overflow:hidden;
float:left;
display:none;
}
.offcanvas {
margin-left:-25%;
}
}
jQuery:
$(document).ready(function() {
$('#trig').on('click', function () {
$('#col1').toggleClass('offcanvas');
$('#col2').toggleClass('col-xs-12 col-xs-9');
});
});
UPDATE:
#media all and (max-width:768px) {
.col-0 {
width:0;
padding:0;
overflow:hidden;
float:left;
display:none;
}
.offcanvas {
margin-left:-25%;
height:0px;
opacity:0;
}
}
UPDATE #2
if you want to animate sidebar height&opacity change this code too:
.row-fluid div {
-webkit-transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
-moz-transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
-o-transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}