One of the helpful features of jQuery UI is its hijacking of the jQuery addClass method, adding animation support by including a second 'duration' parameter, like so:
$('div').addClass('someclass', 1000);
For incoming CSS properties like color, background-color, width, height etc, this all works fine.
But transitions like visibility:hidden -> visibility:visible and display:none -> display:block do not gracefully fade in as I would expect them to. They simply wait until the duration is complete and then appear when the class is finally added.
I'm sure, in the past, I've seen graceful transitions with these CSS types in jQuery UI. Does anybody else know if this is/has been possible?
I'm aware of the fadeIn and fadeOut methods, along with the animate method, but I'm looking to give more precedence to my stylesheets, instead of having to overload my scripts with style animation logic.
I know CSS3 transitions will do it just as well, but I'm looking for a better-supported approach.
display and visibility do not have transitionable states - they are either on (you can see an element) or off (you can't see the element).
If you want it to fade in, then you have to use opacity.
Related
I'm wondering if there is a way to set the fadeout animation of dialogs in vaadin-flow 14.
In Vaadin 8 you could use the css classes "v-window-animate-in" and "v-window-animate-out" to archive this.
Since the div of dialog overlay div is in the shadow-dom i can not access it easly through css.
Yes, it’s possible. And the default Lumo theme actually has a built-in close animation, but I suppose it’s so subtle you can miss it :)
Here you can find the built-in animations: https://github.com/vaadin/web-components/blob/master/packages/dialog/theme/lumo/vaadin-dialog-styles.js#L35-L67
Basically, you add an animation property to the host element when it has the [closing] attribute set on it (:host([closing])). The host element animation is used to track when the dialog can be removed from the DOM, so we are using a “dummy” animation on it with the same duration as the actual animations on the [part="overlay"] element. You can also animation the backdrop element ([part="backdrop"]).
I'm using keyframes to add animation to parts of my website. The animation is a fade in with the page content. My question is if the user loads the site in an unsupported browser, will the text load on the page, or will it not be appear (because of no animation support)?
You can test yourself this quite easily. Remove the animation keyframe (or anything else to make the animation happen) and refresh the page. If the text shows then yes, it will show on browsers that don't support animations
As for the actual animation itself, without seeing it it is hard to tell. If the text's default is to be transparent, have an opacity of 0, or have display:none to start out with then it will likely not show up on browsers that do not support CSS3 animations.
On a side note, CSS3 animations have pretty good support given you use browser prefixes for the older browsers
CSS animations are defined with "to" and "from" or a bunch of keyframes "xx%". But before the animation launches (or if it doesn't launch) and after it has finished, all properties are defined by the rest of the stylesheet, and whatever is in the keyframes has no effect.
I am following a CSS3 transition tutorial: here
I cant manage to get this to work without having to hover. Does anyone have any idea how I could have this same effect from this tutorial without having to hover on the body?
Thanks
You can simplify the answer from #Rufus by simply putting the 'test' class on the body directly in the markup. There's no reason to add it with javascript later.
If you were using css3 transition, then you WOULD need to add the transitioned class after page load, but since you are using keyframe animation, you don't need to wait before adding it.
Here's the example from #Rufus modified to show what I'm talking about: http://jsfiddle.net/mALEC/2/
Is it possible to create a Javascript-like scrollTo effect using only CSS3? For instance:
Button
And somehow telling the window to smoothly scroll to that location? Using Javascript it is very easy, but CSS would be even more wonderful.
I can’t think of any way to do it.
CSS’s animation facilities only allow you to change CSS properties, and there aren’t any that let you refer to the position of elements on-screen, or how much the page is scrolled.
The only way CSS can respond to elements being clicked on is via the :active and :visited selectors, and using :visited to animate a link doesn‘t seem to work.
You can use :active to animate the bottom margin of a link, but the animation will only run whilst the user is holding down the mouse button. See http://jsfiddle.net/w5kcr/1/
I was thinking of using a css transition with a delay as sort of a small animated intro for a page the other day. Is css rendered immediately after its loaded (before the document if fully loaded/ready)? If so I suppose I could add the <link> tag after the document is ready for a similar effect.
On http://www.chapmansbuilding.co.uk/, I added a big white div with JS over the whole content, then did the animation, then removed the div. This meant that I could ensure the remaining content was rendered and preloaded etc at the same time.
Make sure you add it with JS, else the site won't be visible for a user without JS, or if your JS script fails for some reason.
As far as I can tell from the specs and other docs, the transitions are applied immediately when a computed value changes:
When the computed value of an
animatable property changes,
implementations must decide what
transitions to start based on the
values of the ‘transition-property’,
‘transition-duration’,
‘transition-timing-function’, and
‘transition-delay’ properties at the
time the animatable property would
first have its new computed value.
From here
So this happens with hover or focus or some other event.
If you wanted your transition to run on page load, you would need to use some javascript as shown here: https://developer.mozilla.org/en/css/css_transitions#Using_transition_events_to_animate_an_object
If you were worried about the transition happening too quickly, you could set a delay in the js.