4

Last year, I wasn't able to make something theorically simple with CSS3 animations and ReactJS. Last night, I made it work with VueJS (and CSS3 animations yeah). Feels. So. Fuckin. Good.

Comments
  • 0
    Some visual representation of what you did!?
  • 1
    @litesam126 not yet pushed on GitHub, but imagine a Single Page App with four pages displaying different things, and with the following rules:
    - on "landing" page, you can go to "shop", "biography" and "contact"
    - on both "biography" and "shop", you can reach "landing" and "contact" but not each other
    - On contact, you can only go back to the previous page
    You have a sliding transition on each page :
    - landing to shop : left (right when getting back to landing)
    - landing to bio : right (left to getting back to landing)
    - any page to contact : page slides up
    - contact to any page : page slides down

    Sounds easy (and kinda is) but fuck did I struggle to set this up with React. Took only 40 mn (and more experience) with VueJS
  • 1
    @Drillan767 You could've used styled-components and be done with the app within 30mins, you can have all the things within a snap of a finger.

    For example:

    /* Without styled-components */
    <button className="btn btn--primary">primary</button
    <button className="btn btn--disabled">disabled</button>
    <button className="btn">normal</button>

    /* With styled-components *?
    <Button primary>primary</Button>
    <Button disabled>disabled</Button>
    <Button>normal</Button>
    /* all those "primary", and "disabled" will be given to you as a prop in a place where you created your prop */

    *Boom* that is simple, right?

    For more clearer view just see the below image.
Add Comment