CSS editor: add transitions about interactive-examples HOT 5 CLOSED

Hmmmm, I am torn on this one. I like the interaction in general but, I wonder whether it might be confusing to someone new to CSS and, in this case transform. This causes the previous state to transition to the next state. I am wondering if some people may think that the behaviour is part of how transformation are applied.

When they then try it outside the editor, the behaviour will be different. Also, we probably do not want to just blanket apply it to all CSS examples.

We can possibly have a class that can be applied to the container when it is desired.

With transform, I am thinking that resetting the image to its neutral state, and then applying the transform will be a more appropriate optimisation. Currently it simply switching from whatever was currently selected to the next selection, skipping the neutral state.

Thoughts @stephaniehobson @wbamberg

from interactive-examples.

I like it just the way Will did it and I wouldn't want to slow it down by adding returning to 'default'.

I would like to try it and see if the user testing turns up any problems.

from interactive-examples.

@stephaniehobson Ok, I added a .transition-all class[1] and applied it to the image on the transform examples. Which other current CSS examples do you think this can be useful on?

[1] #106

from interactive-examples.

Except for the animation example I think it would be good on all of them. It won't have any effect on the z-index one so I guess there's no point in putting it on that one.

Could we change the transition to ease-out? That way it appears to responds faster to the user input.

from interactive-examples.

Except for the animation example I think it would be good on all of them. It won't have any effect on the z-index one so I guess there's no point in putting it on that one.

Will do.

Could we change the transition to ease-out? That way it appears to responds faster to the user input.

Makes total sense.

from interactive-examples.