Challenge: State Change With Slide Animation

Problem statement

Create a horizontal sliding animation. The element will have two states:

• default: This is positioned at the top left corner of the page.
• right: This is positioned 150px to the right of the default position.

Expected behavior

Clicking on the element should trigger the element to move between the two positions with the following animation configurations:

• Duration: 500 milliseconds Delay: 500 milliseconds Timing function: ease-in-out

The playground below contains an element with basic styling so you can focus on adding the animation. You’ll also be using a single component to create the animation:

• app.component.ts
• app.component.html
• app.component.scss

Coding exercise