Skip to main content

Entry & Exit Transitions — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Entry & Exit Transitions lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Allow discrete transitions

    easy10 min

    Let #box transition discrete properties such as display.

  2. 2

    Transition display

    easy10 min

    Make display the transitioned property on #box.

  3. 3

    Transition two properties

    easy10 min

    Transition opacity and display, in that order.

  4. 4

    Give each its own duration

    easy10 min

    0.3s for the first property and 0.5s for the second.

  5. 5

    Build a full exit transition

    medium10 min

    Fade out and remove from layout, allowing discrete steps.

Find the bug(5)

  1. 1

    Fix the missing discrete behaviour

    easy8 min

    display will not transition without allow-discrete.

  2. 2

    Fix the misspelled value

    easy8 min

    The value is allow-discrete.

  3. 3

    Fix the property order

    easy8 min

    Opacity should be listed before display.

  4. 4

    Fix the space-separated list

    easy8 min

    Multiple transitioned properties are comma separated.

  5. 5

    Fix the single duration

    easy8 min

    Each property needs its own duration here.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace