Which CSS class gets the "transition"?

-
Most CSS transition examples showed two classes. And "transition" and related properties are set on one of them. But at first I didn't understand why things were on one and not the other. Or even on both. And transitions in my own code didn't always happen when I expected them.

But the actual rule is simple: Transitions only happen if the transition property is part of an element's current styles.

If we have class foo and class foo:hover and the transition is on foo, it always happens. Because the foo style is always applied.

If the transition is on foo:hover, then the transition happens when you hover. But everything snaps back instantly when the mouse moves away, because foo:hover styles are no longer applied.

Or foo and foo:hover can have different transitions, such as ones with different speeds. The transition on foo:hover applies when you mouse over the element, because foo:hover is more specific so it's version wins. But the moment the mouse moves away, the transition defined on foo applies.

Comments

Post a Comment

Popular posts from this blog

React-Redux: "Container Component" is Plumbing

-
I think I understand the pieces now... React Functional Components: Are the preferred kind of component we write in React-Redux Are functions that take a "props" object Are the preferred way to output visual stuff and wire up events The Redux Store: Has all the state which we can display Has the dispatch(action) method, which is the only way to change state Your Mission (should you choose to accept it): Use the state and the dispactch(action) function Create props which are data values needed by the functional component Create props which are event handlers that call dispatch(action) The Locations: mapStateToProps : Here you get the state and return props which are just data mapDispatchToProps : Here you get the dispatch function and return props which call it And then React-Redux's "connect" function magically combines the mapping functions and your functional component into a new component which you elsewhere. ---------------------...
Read more

Callback, Promise, Observable, and Doughnuts

-
This is the story of Jerry JavaSript's Automated Slow Doughnut Shop. One day, I wanted a doughnut. So I rode my bike to the automated slow doughnut shop, where they have a slow doughnut machine. You put in a dollar. And then the machine mixes batter, heats the fat, drops the batter into the fat, lifts it out on a linked metal conveyor belt, dusts it with sugar, and drops it into your waiting hands. Once I get my doughnut, I can eat it in the usual manner. But from the time I put in my dollar until the time I receive my doughnut, I am blocked. Fortunately, the slow doughnut machine has a slot labeled, "Insert callback  here". This is great. I code up a function eatDoughnut(doughnut) . I can reference my teeth,  esophagus, stomach, and so on, because they are mine and I know all about them. And then I slip my   eatDoughnut(doughnut)  function  into the slot and get on my bike and ride  to the office while the slow doughnut machine is still mixing...
Read more

box-shadow

-
box-shadow: [inset] x-offset y-offset [ blur-radius  [ spread-radius ]] [ color ] ; With all zeros, the shadow is exactly under the box. So it's hidden. The x and y offsets are like relative positioning. Take the shadow defined by any other parameters, and just move it. Blur comes first, but I'm going to talk about spread first. Spread-radius extends the shadow outward in all directions by some distance. With blur radius still set to zero, a sharp edged shadow extends outward from the box for the given distance. (It looks like a border.) For blur-radius, take a shadow with an hard edge defined according to your spread-radius. And then "fuzz" outward, putting down some color where there had been none. And fuzz inward, lightening the shadow at its old edge, and letting it darken toward it's actual color setting as you move in from . its old edge. Finally "inset" puts the shadow inside the box, instead of outside. Commas!!! Don't put co...
Read more