Trigger event during a css transition - javascript

I want to add a class / set a custom z-index during a css transition.
In my researches, I didn't find anything except webkitTransitionEnd which don't do the work.
I have an animated div on hover but if I hover multiple div, he go below the other, that's why I want to set a custom class during the transition (not during the hover).
Here is a jsfiddle (simplified for webkit)
and the problem in image
Edit: The real problem is when I hover a div, unhover, rehover, hover an other, so it's hard to do a simple timeout...

The problem is that when you "un-hover", the switch to the original z-index is happening instantaneously. So the rotating panel is no longer painted in front of its neighbours.
The easiest way to solve that is to make sure that the z-index value is being transitioned as well. It wasn't transitioning in your code as you had it, because z-index was being set on the parent div.panel but your transition functions were only applied to the child div.front and div.back.
This seems to work even when you switch between panels mid-transition:
http://jsfiddle.net/8Fvdb/1/
.panel{
transition: z-index 1s;
}
(Note that I've commented-out the z-index values on the individual panel faces for simplicity; it doesn't seem to change anything either way on Chrome, haven't tested elsewhere.)

I would give for granted that the CSS transition will succeed, and just remove the class after a timeout equal to the transition time:
with a transition of 2s:
.panel {
transition: opacity 2s;
}
set this timeout to remove the class after 2000 ms:
setTimeout(function(){
//you remove the class after the transition time
$('.panel').removeClass("transition-running");
},2000)
$('.panel')
//you add the class before changing the style
.addClass("transition-running")
.css("opacity","0.1");

Related

How to trigger some javascript before CSS transition?

I have an element whose width increases when another element beside it is hovered over, i.e.
.div2 {
width: 0px;
display: none;
transition: width 2s;
}
.div1:hover ~ .div2 {
width: 100px;
}
I want to change the display to block on mouseover, but before the CSS transition. Then, similarly, I want to change the display back to none after the CSS transition finishes. I tried using .onmouseover to set the display to block, but it set it after the CSS transition.
Is there any way to set the display to block before the CSS transition?
As I understood your question, You can have two classes one for hidden (display :none) and another for visuallyHidden (may be visibility : hidden). On hover use visualy hidden class to get the css transition in effect(take help of JavaScript to add this class). You must take a help of setTimeout here (10 Ms ) should be fine to add another class which actually implements css transition. when it is un hovered you need to recycle logic again. hope it helps

Add smooth transition to button which is becoming bigger after click event

With a javascript click-event I am adding extra html-text (to be specific: an "X"-icon" within a span) to a button. I am doing this with switching the property on the span-icon-class from display: none to display: block.
The button therefore becomes bigger because of the added icon after the click event instantly.
What CSS/js do I need to add, to make this transition smooth, so that the button grows slowly bigger instead of instantly?
Thanks a lot and sorry for maybe complicated questioning.
Maybe look at https://www.w3schools.com/css/css3_transitions.asp.
If you have a fixed initial button width, it should be something like this :
JS :
$('.mybutton').on('click', function(){ $(this).addClass('clicked') };
CSS :
.mybutton{
width : 90px;
transition : width 0.5s ease;
}
.mybutton.clicked{
width : 120px;
}
Yes, you can add CSS to do such a transition. However, you can't use from display: none -> block for a CSS transition. If I don't remember it incorrectly it's because it transitions over time, and display: none/block is a binary system, meaning it can only be shown or not shown, there is no in between. I believe visibility can be used instead because it supports this in-between state of both existing and not existing so to speak.
See this question: Transitions on the display: property
Also, google "css transition display none block" and you'll get a bunch of helpful links.
Okay, I resolved it with a scale-property. I transition the scale of the x-icon, which also slowly enlarges the button.

How to create a content smooth transition

I have 2 div, div1 is actually showing when page loads, div2 is not, when user clicks link1 I need to have a smooth transition between div1 to div2.
I've searched and find some workarounds with jquery and other libraries, but I just cant manage to do it right. If someone could help me out it would be great.
Use CSS3 transitions on properties that will trigger Hardware Acceleration in browsers i.e the CSS Opacity property
transition:opacity 1s ease;
To trigger the tranisiton just add a hide class to div1 via JS which sets the opacity to zero
.hide{opacity:0;visibility:hidden;}
Vanilla JS version here http://jsfiddle.net/sjmcpherso/L3fg08zp/
with jQuery to toggle the class you could use:
$('#change').on('click',function(){
$("#div1").toggleClass('hide');
});
You could have a look at jQuery.fadeIn and jQuery.fadeOut. See the "Demo" parts of the page for a demonstration.

Css animation - setTimeout doesn't apply changes which breaks animation

Here is the description of my goal:
I've got box with display: none
At some moment I need to display it with opacity animation.
Here my solution:
1. transition: opacity 0.5s ease-in-out;
2. On first step set display: block; opacity: 0
3. On second step set display: block; opacity: 1, do it in setTimeout() to apply first step.
The problem is that first step applied only in some cases - sometimes it works / sometimes doesn't and browser just skips first step. I thought changing setTimeout to requestAnimationFrame should fix the problem but it doesn't - check my example
Why setTimeout / requestAnimationFrame does not force browser to apply first step? How to force browser to apply first step before applying second one?
Solution: http://jsfiddle.net/sxny7zs2/
.box{display:none} should be .box{display: block;}
When you set display:none you remove the object from the DOM almost entirely. By resetting to display:block you bring the object back fully and it begins to interact with other objects. The display feature is not meant for animations but for removing objects from interfering with others.
I suspect this is the villain:
$box.removeClass('is-animate-enter').addClass('is-animate-active');
By removing is-animate-enter class you trigger display:none; before you are able to add your next class. This means the object is unloaded from the view. Meanwhile when you do is-animate-active you instantly set display:block and opacity:1. As far as the browser is concerned you are creating a new element, not modifying an old one here. As previously stated, when toggling the display you are actually loading and unloading an object so no animation is possible.
Maybe .switchClass() could fix this but I'm not sure, to reiterate the display command is for loading and unloading and not for animations.

make a tag not effected by a body class

So I have set my body width to 600px so when moused outside of the body, the body turns to an opacity of 0.25. I have that setting being applied directly to the body tag by jquery adding a class to it and when the body is moused over, the class (opac) is removed. when moused out of, i want buttons that have a fixed position outside of the body that previously had the opac class applied to it, not be affected by it any more. the buttons will be brought up to an opacity of 1 (which if i am not mistaken, is the normal setting for items so they are fully in view). currently, when the body is moused over, the buttons do have a opacity of 0.25 but when the body is moused out of, the buttons stay the same opacity and when the buttons are moused over, it brings both the body and buttons to an opacity of 1.
The elements inside the body will inherit the 0.25 opacity of their parent (<body>in this case, ). Your best bet is instead to use a structure like the following:
<body>
<div class="container">
...
</div>
<div class="buttons">
...
</div>
</body>
And now you can apply the opacity on :hover to .container and position the buttons in .buttons accordingly.
Do not use opacity for this.
If you set opacity to mother element, all child elements will retake this setup.
Use RGBa for colors and prefer :hover selector instead of jquery.

Categories

Resources