search

OperationXen / cyberpunkCTF

A CTF framework built on python using django, graphql and react
GNU General Public License v3.0
1 stars 0 forks source link

Component animations #11

Open OperationXen opened 5 years ago

OperationXen commented 5 years ago

Add swipe animations to login / register widgets and grow on initial draw of categories

mikeyhogarth commented 5 years ago

I take it you've seen these yeah?

https://material-ui.com/components/transitions/

OperationXen commented 5 years ago

No, I was going to do it oldschool with CSS animations in classes and hook lifecycle methods to add the classes

mikeyhogarth commented 5 years ago

Noooo! :)

OperationXen commented 5 years ago

Its a little more complex, but it does give me a degree more control. Should i create my own transition component instead?

mikeyhogarth commented 5 years ago

Other people have done that for you. If you don't want to use the material ones, maybe try one of these;

https://github.com/reactjs/react-transition-group/ (3 million downloads a week) https://github.com/react-spring/react-spring (100k downloads a week) https://github.com/FormidableLabs/react-animations (10k a week) https://popmotion.io/pose/ (80k downloads a week)

The transition-group one is actually documented in the official docs; https://reactjs.org/docs/animation.html

It is of course totally possible and acceptable to just use CSS though. If you just want simple fades/grows/slides though just use the material ones.

OperationXen commented 5 years ago

I have a natural reluctance to installing additional libs, I dislike having loads of dependencies.

Perhaps javascript development is not for me

mikeyhogarth commented 5 years ago

That is a really healthy attitude - you should always treat the installation of a new npm module as a big deal (that's why I put npm downloads per week - that's a really good indicator as to whether to proceed or not from a vulnerability point of view).

That said - the JS community is very modular, and people do tend to build smaller things (unlike the python/ruby community where people tend to build very big things). If you want to see evidence of this, take a look in your node_modules folder and I'll bet it's already into the hundreds of modules :)

It is not unusual for a JS project of any significant size to have a few dozen dependencies or even more. It's about finding that sweet spot between avoiding-if-possible and not-reinventing-the-wheel. For a few twiddly animations, probably not, but if animation is going to be a massive part of your UI then I think adding a new dependency is fine.