Bootstrap two column animation flikers fix

Bootstrap two column animation flikers fix - javascript

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

Related

CSS transition not working when changing css from javascript

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

Transition on image width does not work with window scroll

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

Menu scrambling in CSS

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

Hover effect is under the image

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/

jQuery expanding menu easing without css transition

So, I'm trying to set up a expanding and collapsing menu depending on what item you are hovering. I am using css transitions to make the expanding and collapsing smooth and some jQuery to change width css properties. However, IE doesn't support transition css so I am trying to find a way to do this with jQuery but haven't found a solution. My knowledge isn't the greatest when it comes to jQuery. Any help would be amazing.
<html>
<head>
<style>
.a{
width:100px;
height:100px;
background:#852369;
position:relative;
float:left;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
.b{
width:100px;
height:100px;
background:#542365;
position:relative;
float:left;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
.c{
width:100px;
height:100px;
background:#523641;
position:relative;
float:left;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
</style>
</head>
<body>
<div class="a">This is div a</div>
<div class="b">This is div b</div>
<div class="c">This is div c</div>
<script>
$(function() {
$('.a').hover(function() {
$('.b,.c').css('width', '50');
$('.a').css('width', '200');
}, function() {
$('.a,.b,.c').css('width', '');
}
);
$('.b').hover(function() {
$('.a,.c').css('width', '50');
$('.b').css('width', '200');
}, function() {
$('.a,.b,.c').css('width', '');
}
);
$('.c').hover(function() {
$('.a,.b').css('width', '50');
$('.c').css('width', '200');
}, function() {
$('.a,.b,.c').css('width', '');
}
);
});
</script
</body>
</html>
Here is a simple jsfiddle of what I have currently.
http://jsfiddle.net/kevin11189/kRZHL/1/
Thanks,
Kevin

You can use the animate and stop methods to accomplish this:
http://jsfiddle.net/brianpeiris/CgY2b/2/
$(function() {
var menus = $('.menu');
menus.hover(function() {
menus.stop();
$(this).animate({'width': '200'});
menus.not(this).animate({'width': '50'});
}, function () {
menus.stop().animate({'width': '100'});
});
});
<div class="menu a">This is div a</div>
<div class="menu b">This is div b</div>
<div class="menu c">This is div c</div>
.menu{
width:100px;
height:100px;
position:relative;
float:left;
}
.a{ background:#852369; }
.b{ background:#542365; }
.c{ background:#523641; }

We Keep Coding

JavaScript is the programming language of the Web.

Bootstrap two column animation flikers fix - javascript

Related

CSS transition not working when changing css from javascript

Transition on image width does not work with window scroll

Menu scrambling in CSS

Hover effect is under the image

jQuery expanding menu easing without css transition

Categories

Resources