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"]).
Related
I have some hard time using https://github.com/euvl/vue-js-popover library. I would love to add some transition for the bottom popover but I cannot even find a place that it's using css classes responsible for transitions.
Does anyone use it or know how to do transitions for such solution?
It's hard as there is no element of popover in DOM untill i click on the button.
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.
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.
I am developing an app using PhoneGap and jQuery, and am a little confused about animations.
I decided to go with what I already knew, which was jQuery animate, and this worked great, except I came across people talking about hardware acceleration.
All I am doing is animating a div to move right on page load:
$("#"+that).find('.captionShine img').animate({left: '550'},700);
I found a plugin called jQuery-Animate-Enhanced which turns these animations into CSS3 transitions, therefore hardware accelerating them (I believe).
So I looked more into the CSS3 animations, and am confused as to the difference between transitions and animations in CSS3. Can I still use hardware accleeration on the CSS3 animations? Or can it only be done on transform: translate3d(0,0,0);?
Is it just a case of assing translate3D to any element I want to have hardware accelerated?
kirupa has a very good explaination here: http://www.kirupa.com/html5/css3_animations_vs_transitions.htm
Skip down to read his conclusions bullet point first and then start reading from the top to fill in the details. Basically, transition and animation are two different way you define animation in css. Below is my own translation of the author conclusion.
Transition allow you to do very simple css that animate from a to b. Imagine you have an element with class="from-a" then you add a class to that element called class="to-b". Your transition definition in class="to-b" is where your animation ends.
Animation allow you to define/orchestrate the entire animation using keyframe css definition. Keyframes allow you to breakdown and orchestrate series of complex animations.
As you can see, because Transitions are based on adding of class or style to an element. You can easily define a series of classes and use with javascript+timeout to set these class and create the same kind of orchestration as Animation.
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/