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/
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 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 have just come across a weird CSS quirk that goes far beyond my understanding and would appreciate some help:
I was trying to build a fancy pure css dropdown solution using the clickable event method Ryan Collins proposed: http://www.ryancollins.me/?p=1041
With :active and :hover and some nested divs we may make trigger spans (or divs or whatever) that cause a sister element in the same container to appear upon mouse click. The example on Ryans page worked on my ipad so I assumed that iOS was smart enough to handle a touch event as triggering the :active state - and if the trigger contains a hyperlink this works, but there is no way to deactivate the active state of a hyperlink, safe for clicking on another hyperlink.
This sucks, because my plan to have an elegant navigation (and some other stuff) pop up and hide from view with just css is foiled, the menu never collapses - but then why does the example on Ryan's page work? I did some testing and finally narrowed the key element down to a twitter widget he has embedded on his page. Some javascript styles the embedded tweet and in doing so, it affects the very :active and : hover solution that all of a sudden works via touch on iOS, even without hyperlinks.
Can anybody tell me what causes this behavior and if I could emulate it without relying on a crazy hack like embedding a twitter widget and hiding it from view?
Found the answer myself with some more digging through the code and a little Google help:
The twitter widget among all the proprietary stuff it does also declares a touchstart event, which by itself anywhere on the page is enough to make mobile safari utilize the CSS :active pseudo style.
http://miniapps.co.uk/blog/post/enable-css-active-pseudo-styles-in-mobile-safari/
The top menus at www.petersencreative.com use CSS (and some CSS3) to provide the smooth transitions. My problem is that if you click a link and then mouseoff the link, it starts to descend again. Is there a way to keep it up (fnnnrrr!) once it's been clicked and then mouseoff?
I've looked at using :active but that only for when the mouse is down. :focus only seems to work for keyboard navigation. Am looking at using a bit of jQuery or is there a way to do it using CSS?
Can be done with CSS, using :target selector.
I have a site where the background-image jumps up on hover state and I can't for the life of me find the specific css that does this.
I'm able to get to the "offending" link and give it a border and change the padding and margin. The problem is that firebug and chrome inspect does not show me what happens on the hover state.
So I want a way to see what additions to the normal css state happens on :hover.
Any pointers?
(P.S. IE 8 doesn't have this issue - ie no jumping of background image)
Try using the Inspect function in FireBug to focus in on the element in question. It will show you all related CSS, including any CSS that is related to :hover. You can also see in this way what changes happen to the elements CSS (and any other DOM attribute) when you hover your mouse.
In case the changes are coming from some JavaScript, try out the Visual Event bookmarklet. Activating it on the page will let you see all events that are tied to the element in question.