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.
Related
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.
I have two divs. One fills the page, the other is hidden and gets displayed with a CSS3 animation :
div{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.div2{
top:100%;
display:none;
transition: top 0.3s ease-in-out;
}
.div2.shown{
top:0;
}
Now, I know that I cannot put display:block directly inside the .shown class because it is not supported by CSS 3 animations.
So here is what I do :
$(".div2").show().toggleClass("shown");
But the animation does not work, it just appears instantly. I thought that it was because the .show() wasn't finished yet when I trigger toggleClass. So, as a "duration" method, it must support .delay.
Now, if I delay the toggleClass :
$(".div2").show().delay(100).toggleClass("shown");
Still does not work.
Let's try a setTimeout:
$(".div2").show();
setTimeout(function(){$(".div2").toggleClass("shown")}, 1);
This one works. So it appears that show() is indeed a long operation, but it does not support the delay() method. So I wanted to try using its callback :
$(".div2").show(function(){$(".div2").toggleClass("shown")});
And this works, without setTimeout ! But the callback gets called twice (once at the beginning, once 400ms after).
What should I use to do that properly ?
Took me a second to see this. The easiest solution is just to set a timer of 0 on your $.show() command, like:
$('.div2').show(0).toggleClass('shown');
That will toggle the show instantly and allow for the animation to happen (see http://jsfiddle.net/8y4Lq2n9/).
If you're worried about setting a specific number, there are options you can pass into the show command, with the specific one being :
$('.div2').show({queue:false}).toggleClass('shown');
This will take the element out of the animation queue and allow other actions to happen instead of preventing the transitions. See: http://jsfiddle.net/8y4Lq2n9/1/
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");
I have a couple of classes: hide is display: none, and transparent is opacity: 0. The element pr_container has -webkit-transition: opacity 1s. The following JQuery-based code makes an element appear in an animated fasion:
pr_container.removeClass("hide");
setTimeout(function() { pr_container.removeClass("transparent"); }, 0);
However, when I remove setTimeout and instead just remove the second class, there is no animation. Why?
Edit: I'm using the latest Chrome, I haven't checked other browsers yet.
Edit: I tried putting both calls in the same setTimeout callback - no animation. So it's clearly about separation.
Edit: here's the jsFiddle: http://jsfiddle.net/WfAVj/
You can't make a transition if you are changing display property at the same time. So in order to make it work you have to hide your element some other way. For example:
.hide {
height: 0;
width: 0;
/* overflow: hidden; padding: 0; border: none; */
}
http://jsfiddle.net/dfsq/WfAVj/1/
There's no reasonable "curve" to transit from one display status to another, so in current implementation of browsers, any transition that somehow involves display will end up with no transition at all.
With this code:
pr_container.removeClass("hide");
pr_container.removeClass("transparent");
You can imagine the two statements execute in a single "blocking" queue, so browsers practically renders the element from class="hide transparent" to class="", and as stated above, the hide class practically invalidates any existing transition.
By using
pr_container.removeClass("hide");
setTimeout(function() { pr_container.removeClass("transparent"); }, 0);
You told browsers to remove the "transparent" class "as soon as possible, but no in the same queue", so browser first removes "hide", and then moves on. The removal of "transparent" happens when the browser think it has resource to spare, thus the transition does not get invalidated.
only the "transperent" class produce animation .. "hide" is instant. So start the animation and if needed "hide" after 1 second:
test.addClass("transparent");
//hide after 1 sec, when the animation is done
setTimeout(function() {test.addClass("hide"); }, 1000); //1000ms = 1sec
http://jsfiddle.net/WfAVj/4/
By using suggestions in the linked question, I made a version that I'm satisfied with:
.test {
-webkit-transition: visibility 1s, opacity 1s;
}
.hide {
visibility: hidden;
}
.transparent {
opacity: 0;
}
http://jsfiddle.net/xKgjS/
Edit: now the two classes can even be combined to one!
Thanks to everyone!
I'm currently starting on an animation project. In the project I'll have more than 40000 divs and animate them iteratively. If any of divs are in passive state (i.e. it's not animating at least for 2 seconds), I won't display them to increase animation performance.
The question is: which css property is the most suitable for this?
.passive1{
display:none
}
.passive2{
visibility:hidden;
}
.passive3{
opacity:0;
}
And how can I measure rendering performance like fps, gpu usage?
While all 3 properties make an element's box seem invisible, there are crucial differences between them:
Property
Painted
In layout
Stacking context
Pointer events
Keyboard events
opacity: 0;
No
Yes
New
Yes
Yes
visibility: hidden;
No
Yes
Varies
No
No
display: none;
No
No
Varies
No
No
The "Painted" column indicates if the browser will paint the element's background (e.g. background-image), #text content, and so on.
An element cannot be painted without also participating in the page's layout, of course.
This is No for all 3 properties and values, as the browser won't need to paint the element's box as it's invisible.
The "In layout" column indicates if the browser will compute the layout and dimensions of the element - along with any of its descendants not excluded from layout.
This is only No for display: none;, as with opacity: 0; and visibility: hidden; the browser will still determine the size of the element so it can correctly layout other elements relative to the current element (e.g. if you have span.hidden { visibility: hidden; display: inline; }).
The "Stacking context" column indicates that any use of opacity (except opacity: 1.0;) will create a new stacking-context, which complicates use of the position property.
The "Pointer events" column indicates if the element will respond to user-interaction from a pointing device, such as a mouse, touch-screen, stylus, etc.
e.g. with visibility: hidden; then the :hover state won't work, and clicking the same element won't apply :focus or :active either.
Additionally, the DOM won't raise any pointer events you'd handle in JavaScript (e.g. visibility: hidden; won't raise mouseclick, touchstart, etc - note that the click event can still be raised by certain elements, like <button> if invoked by the user using a non-pointer input method, such as with keyboard or voice (accessible) navigation means.
You can use pointer-events: none; to block pointer events, but this won't block keyboard and other non-pointer input and so should not be used to disable an element because the user can still use the keyboard to interact with it (especially <button>, <input />, <select>, and <textarea>).
The "Keyboard events" column indicates if the element can be interacted-with using keyboard navigation (and possibly other navigation means).
This includes smart-device (smartphones' and tablets') browsers' "Prev/Next Field" buttons for navigating <form> elements (as this uses tabindex).
Unlike how pointer-events can be disabled in CSS using pointer-events: none;, there is no CSS property to disable keyboard interaction.
This table shows a more complete comparison between the main values of those 3 properties:
Property
Painted
In layout
Stacking context
Pointer events
Keyboard events
Animatable
Opacity
opacity: 0;
No
Yes
New
Yes
Yes
Yes
opacity: 0.1;
Yes
Yes
New
Yes
Yes
Yes
opacity: 0.9;
Yes
Yes
New
Yes
Yes
Yes
opacity: 1;
Yes
Yes
Varies
Yes
Yes
Yes
Visibility
visibility: hidden;
No
Yes
Varies
No
No
Yes, with caveats
visibility: visible;
Yes
Yes
Varies
Yes
Yes
Yes, with caveats
Display
display: none;
No
No
Varies
No
No
No
display: contents;
Text and children only
Text and children only
Varies
Yes
Yes
No
Other
pointer-events: none;
N/A
N/A
N/A
No
Yes
No
The "Animatable" column indicates if that property can be used with a CSS transition (transition:) or CSS animation (#keyframes).
Crucially, the display: property cannot be animated, which is why we can't use a #keyframes timeline to completely hide an element after the animation is complete.
But curiously, we can animate the visibility: property despite being non-continuous, albeit with caveats.
Also, don't get confused by the similarly-named backface-visibility and content-visibility properties.
backface-visibility is only applicable to 3D transform operations.
content-visibility is an optimization to speed-up page rendering during initial page-load, but requires CSS Containment first, which is out-of-scope for this QA.
The answer found here will answer your first question (most likely display:none as the space is collapsed completely).
To your second question, tools such as this will probably be useful for you. However 40,000 divs sounds like way too many and you will probably have better performance using canvas or SVG (for example, using the KineticJS library as this handles animations - transformation, rotation, scale, etc.) for you.
display:none will hide the whole element and remove that from layout space whereas visibility:hidden hides an element but take up the same space as before.
Opacity can be used if you want to create transparency or fade effect.
Performance will be an issue if display:none or visibility:hidden is used since they trigger paint and layout in most browsers which means your browser will redraw the viewport whenever those two changes so I will recommend opacity but still for that number of divs it will still be not performant as expected you can try webgl using a library called html-gl which render your divs in webgl check https://github.com/PixelsCommander/HTML-GL
Here is a compilation of verified information from the various answers.
Each of these CSS properties is in fact unique. In addition to rendering an element not visible, they have the following additional effect(s):
Collapses the space that the element would normally occupy
Responds to events (e.g., click, keypress)
Participates in the taborder
collapse events taborder
opacity: 0 No Yes Yes
visibility: hidden No No No
visibility: collapse * No No
display: none Yes No No
* Yes inside a table element, otherwise No.
got from link
display:none because the divs are taken out of the flow then, thus their position does not have to be calculated.
That being said, 40000 divs sounds crazy. Did you consider the alternatives like HTML5 canvas or SVG?
Sometime i use visibility and opacity together to achieve effect to avoid click event
e.g.
normal state/element removed from screen:
visibility:hidden;
opacity:0;
transition: all .3s;
hover state/element on screen:
visibility:visible;
opacity:1;
Found this thread whilst investigating a hover: bug in Safari mobile
Confirming that opacity: 0 is a valid approach (it is in my case, thanks all). opacity: 0 fixes it enough to be workable (still requires an annoying js redraw on screen rotate [width change]).
Background info on the bug I fixed with opacity: 0:
The hover is on a li containing a div that is revealed when hovering (or single touch on mobile) a calendar entry. Really random working/not working in Safari mobile - and even weirder the behavior changes on a screen rotate++ [nb no media queries involved so not that].
So annoying as otherwise works in all other browsers I've tried.