Skip to content
Submitted almost 3 years ago

Responsive pricing table section built using flexbox

zy•150
@zytuu
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Pricing component with toggle
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I'd like to know how I could make the toggle switch for my annual / monthly content smooth when i switch it back to annually from monthly. It seems to transition correctly when going from annually to monthly, but doesn't work in the reverse.

Community feedback

  • Luka•820
    @LukaKobaidzePosted almost 3 years ago

    Hi!

    The reason why transition doesn't work is because in .toggle::before class you have transition: 0.2 ease instead of transition: 0.2s ease (s is missing)

    0
    zy•150
    @zytuuPosted almost 3 years ago

    @LukaKobaidze oh really, whoops... massive oversight but thanks for clearing that up for me <3

    0
    Luka•820
    @LukaKobaidzePosted almost 3 years ago

    @zytuu No problem xD

    Btw i would recommend being explicit about what you want to transition instead of adding transition to all properties. For example in this case adding left inside transition (transition: left 0.2s ease). It's better for performance and also better for someone who reads your code to understand what you want to transition.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord