search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.87k stars 1.82k forks source link

Animation Mechanism #6106

Closed lee-chase closed 1 year ago

lee-chase commented 4 years ago

Summary

Animation in components is tricky, especially if conditional rendering logic or non-animatable styles or attributes are used.

While some frameworks allow class based animation for this type of logic (React, VueJs) others may not, although all have mechanisms adding and removing classes.

Use CSS based animation via orchestration classes for currently non-animatable transitions.

Justification

A more pleasing user experience

Desired UX and success metrics

Users should see animations in components currently hard to animate without javascript.

"Must have" functionality

It should be able to animate the transition between states for the overflow menu, tabs, content-switcher, accordion without use of bespoke javascript for each framework.

Specific timeline issues / requests

Do you want this work within a specific time period? Is it related to an upcoming release?

No

Available extra resources

What resources do you have to assist this effort?

Can consult/implement on Vue and CSS.

lee-chase commented 4 years ago

Created the following to show how a simple SCSS flag could be used to animate in both Vue and React using the same CSS.

React - https://codesandbox.io/s/silent-hooks-vskzl?file=/src/App.js:221-530 Vue - https://codesandbox.io/s/relaxed-tdd-ll0pk?file=/src/App.vue:28-214