Comments (5)
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.
Related Issues (20)
- Article element in a wrong implementation HOT 5
- :nth-child - update example to be inclusive HOT 5
- `npm install` has `2 vulnerabilities (1 moderate, 1 high)` HOT 2
- `1 moderate severity vulnerability` when running `npm install` HOT 2
- `Array.prototype.reduce()` demo requires horizontal scrolling HOT 7
- Expected output is wrong HOT 2
- Live example on the groups and backreferences page has inconsistent name HOT 3
- try it confusion HOT 2
- css.properties.backdrop-filter - The Firefox WebDev tool says invalid property name although it is running latest edition HOT 1
- Create an interactive example for `HWB()` HOT 5
- Example HTML Dialog HOT 3
- unnecessary css property in an interactive element HOT 3
- 'space-evenly' (and maybe others) in the demo looks odd given the use of grid-gap HOT 1
- Primary application A is nested with subapplication B, and subapplication B is nested with subapplication C. The font icon of subapplication C cannot be displayed HOT 2
- The license in "package.json" and "package-lock.json" is different from the one in "LICENSE" file HOT 2
- Bad practise in examples (prefixed property last) HOT 4
- Change color of `<p>` element in `<dialog>` element to make it visible. HOT 3
- the interactive sections are way too narrow to be shown properly HOT 3
- input.hidden = "true" in the example JS prevents it working HOT 4
- Inaccessible color contrast ratio in menu element example HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from interactive-examples.