will CSS transitions override each other? - javascript

I have two col-md-6 class and each contains a button in it, upon clicking, im using jQuery to toggleClass() of one between col-md-6 and col-md-12 and hide/show the other. I also use CSS transition to animate the toggling, but it would work for one class and if I click the other button, the transition is not working.
Does multiple class selector cause issue with transitions?
.hello, .bye{
-webkit-transition: width 500ms;
-moz-transition: width 500ms;
-o-transition: width 500ms;
transition: width 500ms;
}
Here's the problem in jsfiddle

Your question is a little vague, so I took it upon myself and made some necessary changes to your code, so that the end result will resemble a lot what you (most likely) have in your mind.
CSS Notes:
To avoid having #btn1 and #btn2 overflow .hello and .bye respectively, you need to use overflow: hidden.
To avoid having .hello and .bye wrapping during the transition if there's not enough room for both, you need to use: padding: 0.
If you want your buttons to remain at the exact position they were (15px indented), use: margin-left: 15px.
CSS Code:
.hello,
.bye {
padding: 0;
overflow: hidden;
-webkit-transition: width 500ms;
-moz-transition: width 500ms;
-o-transition: width 500ms;
transition: width 500ms;
}
#btn1,
#btn2 {
margin-left: 15px;
}
JS Notes:
Your code is kind of inefficient as you basically repeat the same code over and over, so I created a function for you that can be used for both buttons.
JS Code:
Check out the full JavaScript code in the following:
Codepen: → here;
jsFiddle: → here;

Related

How to improve this animation?

I have three divs on the same line. You can check the example here: http://yoyo.ro/abw just scroll to the bottom of the page to the three boxes: Made to Measure, Instagram and Video Tracking.
When I click the left one, I want the other two to slide to the right and some text to appear. I tried to do it, but it seems that I complicated it so much and it isn't even smooth.
function hideTest(){
$(".instagram").addClass("slideout");
$(".videotracking").addClass("slideout");
$(".instagram").animate({left:"150%"},500);
$(".videotracking").animate({left:"150%"},500);
}
function showTest(){
$(".instagram").animate({left:"33.3%"},500);
$(".videotracking").animate({left:"66.6%"},500);
$(".instagram").removeClass("slideout");
$(".videotracking").removeClass("slideout");
}
$(".madetomeasure").on('click',function(){
var testwidth = $(this).find(".vc_btn3-container").width();
$(this).find(".vc_btn3-container").css("width", testwidth);
if(!$(this).hasClass("openslide")){
hideTest();
$(".madetomeasure").addClass("openslide");
$(this).find(".txtbox").animate({left:0},500);}
else {
$(this).find(".txtbox").animate({left:"-100%"},500);
$(".madetomeasure").removeClass("openslide");
showTest();
}
});
here is the css relevant to the JS
.txtbox{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 66.5%;
display:none;
left:-100%;
padding:0px 15px;
float:left;
position:relative;}
.instagram, .videotracking{position:static;}
.instagram {left:33.3%;}
.videotracking{left:66.5%;}
.instagram.slideout{position:absolute;}
.videotracking.slideout{position:absolute;}
.madetomeasure .button{
z-index:1;
height:300px;
background: url(http://yoyo.ro/abw/wp-content/uploads/2016/02/instagram.jpg) 100% 30% !important;
border: none !important;}
.madetomeasure.openslide {width:100%;}
.madetomeasure.openslide .wpb_wrapper {display:flex;}
.madetomeasure.openslide .txtbox {display:block;}
Thank you so much for the patience... :) I really appreciate it
As far as I know, your problem of smoothness is because:
jQuery change the inline styling of the animated element per frame. That is a lot of work and you can actually see the action if you inspect your element when it's animating.
CSS does poorly on animating left and right. There are many articles about this but here's one if you don't want to search: https://css-tricks.com/tale-of-animation-performance/
The Solution
Fiddle: https://jsfiddle.net/kv5twc64/1/
The solution is very common, and is used by many CSS libraries, a trick using .active, CSS animation and some JS.
Here I used the transition property for .card:
.card {
display:inline-block;
float:left;
max-width:33.333%;
position:relative;
cursor: pointer;
transition: 0.5s all ease-out;
}
If you don't know, transition will create a tweening effect when the elements' property has changed.
And here is the trick: By using ~ selecting the siblings in CSS and the transform property:
.card.active .desc {
transform: translateX(0);
}
.card.active ~.card {
transform: translateX(66.666vw);
}
There are several upsides on using CSS in this case:
You can simplify your JS. The JS became:
$(function(){
$(".card").eq(0).click(function(){
$(this).toggleClass("active");
})
})
You can improve webpage performance
You can have more choices on (simple) easing functions in CSS (jQuery only offers "swing" by default). Check this out: http://easings.net You can do something like this:
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
Hope this can help. But the lesson here is: Use CSS rather than JS when you can!
P.S. 66.666vw means 2/3 the width of the viewport width.

AngularJS - Slide Divs Up And Down With Z-Index Changes Isn't Being Respected

Please see the JSFiddle here which shows my issue: http://jsfiddle.net/mlippy/zkH7S/
I'm attempting to shuffle divs up and down a list with those divs moving up hiding the divs moving down. If you look at the fiddle, there are 5 different colored boxes that you can click to tell them to move to the top. If you click various boxes in various positions, you'll start to see the z-index of the boxes moving up not be higher than that of the boxes moving down. If you click the 3rd positioned box repeatedly, that's been a quality reproducer for me.
The angular directive myWidget is applying the indexes through classes which are being added / removed in chained addClass and removeClass calls. See below and the opposite version in the fiddle.
element.removeClass('moveDown').addClass('moveUp').css('top', (newValue * 45) + 'px');
I had thought that this meant the browser was going to complete the first chained call before moving onto the second (and so on). However in this case it doesn't appear to be doing so.
Also in the directive / below, you'll find a working solution using $timeout to delay the change to the css top value which triggers the transition. It's been commented out, but there are comments showing how to toggle to the solution in the two spots code needs to be changed. This feels like cheating / not the correct way for it to be done however. Hence the question here.
element.removeClass('moveDown').addClass('moveUp');
$timeout(function() {
element.css('top', (newValue * 45) + 'px');
}, 350);
This is my first time using AngularJS, so feel free to let me know if I'm using things incorrectly or there's a better pattern which would fix my issue.
Thanks!
You're right, there is a better way to do it.
See, your code for transition affects all properties:
.widget.moveUp {
z-index: 100!important;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.widget.moveDown {
z-index: 1!important;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
So my guess is that your transition to z-index is also taking 1 second to happen.
Guessing that, I've took the liberty to change these lines of code to target a transition only on the top property, which is the only one that should be affect in your case.
.widget {
width: 100%;
height: 40px;
position: absolute;
clear: both;
z-index: 1;
-webkit-transition: top 1s ease-in-out 0s;
-moz-transition: top 1s ease-in-out 0s;
transition: top 1s ease-in-out 0s;
}
.widget.moveUp {
z-index: 100!important;
}
.widget.moveDown {
z-index: 1!important;
}
Here, I updated your FIDDLE

Animating CSS by transitions when a class is added to an element

I'm using the Foundation framework on a project & it's Top Bar feature for navigation allows for drop-down navigation to appear on hover.
During the hover event it adds a .hover class to the relevant element, therefore the changes in CSS pop into sight rather than animating by way of a smooth transition.
This got me thinking. Is it possible to animate (via transitions or similar) the changes in CSS definitions?
Take this example. Here is our default element:
<div class="a-box">Some content</div>
And it's default CSS:
.a-box {
width: 200px;
height: 200px;
background: red;
}
On hover the framework (which I do not wish to edit the core file to keep it clean for updates) adds the hover class. Making our element now look like this:
<div class="a-box hover">Some content</div>
Here could be some CSS for the hovered element:
.a-box.hover {
width: 400px;
// I thought perhaps adding the following would work but it doesn't appear to
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
transition: all 200ms ease;
}
I'd be keen to hear others POV on this! I'm not sure if this is a duplicate, but all the posts I've read relate to some form of jQuery animation.
You aren't far off the mark, here is a working example.
The main error in your example is that you have
<div class="my-box hover">Some content</div>
But your CSS is looking for a-box not my-box.
As a habit, I normally define the animation on the simplest (most general) selector for the element and then any additional selectors will benefit from it.
.my-box {
width: 200px;
height: 200px;
background: red;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
transition: all 200ms ease;
}
.my-box.hover {
width: 400px;
}

how to animate "simple jquery filtering" by using css only

I'm trying to animate the elements when they are filtered by javascript but the codes below don't work. Any suggestion?
This is what I have so far.
http://jsfiddle.net/ejkim2000/J7TF4/
$("#ourHolder").css("animation","scaleUp 0.3s linear 0.4s forwards");
$("#ourHolder").css({"animation" : "scaleDown 0.3s linear 0.4s forwards"});
On second thought, is there any other way that I can animate the elements by using css only?
I suggest you do it using CSS transitions. I believe this is what you're trying to do, but I can't find the referenced 'scaleDown' animation anywhere. My solution animates both width and height of the .item elements when toggling an additional '.hidden' class on them:
#ourHolder div.item.hidden {
transition: all 0.3s linear
}
#ourHolder div.item.hidden {
width: 0;
height: 0;
overflow: hidden;
}
Full solution on http://jsfiddle.net/5pKwy/
EDIT: Fiddle using min-height and min-width: http://jsfiddle.net/5pKwy/1/

Trying to add classes to multiple divs by hovering over one div

Basically, I have a page made up of five vertical stripes of different colors. These will eventually be links to different sections or something like that.
Check out this fiddle to get a general idea of what I'm talking about: http://jsfiddle.net/nolbear/4fea3/
Here's my JavaScript:
$('#banner1').hover(function() {
$(this).toggleClass('forty');
$('#banner2').toggleClass('twenty');
$('#banner3').toggleClass('twenty');
$('#banner4').toggleClass('ten');
$('#banner5').toggleClass('ten');
});
I'm trying to get it so that when you hover over the top stripe, it becomes larger, and all the other stripes get smaller to compensate. The stripes should take up the entire height of the page at all times (that's why I'm using percentages).
I don't understand why the code I've written isn't working, I've taken it directly from other StackOverflow questions that have been answered and it still won't work for me.
The first problem is that you didn't set jQuery in your fiddle
Secondary, you set the height by id which overrides the class values so instead I styled them by class.
http://jsfiddle.net/4fea3/4/
<div id="banner1" class="banner">
</div>
<div id="banner2" class="banner">
</div>
<div id="banner3" class="banner">
</div>
<div id="banner4" class="banner">
</div>
<div id="banner5" class="banner">
</div>
.banner {
width: 100%;
height: 20%;
transition: all 0.2s ease 0.0s;
-moz-transition: all 0.2s ease 0.0s;
-webkit-transition: all 0.2s ease 0.0s;
-o-transition: all 0.2s ease 0.0s;
-ms-transition: all 0.2s ease 0.0s;
overflow: hidden;
}
Your code is working, it's just the css that is not working. You've applied height: 20% to each banner, and then height: x% to each css class that you wish to change the height of the banners. Unfortunately the first height: 20% will override this. I've used !important to fix it in the fiddle: http://jsfiddle.net/4fea3/3/
Ideally you would avoid the !important and update your styling to override correctly when the classes are added.

Categories

Resources