Note: I used window.innerWidth in the webinar demo. It was a bad idea. It is NOT always the same as the available screen width. In the assignment files, I switched to use a hardcoded value(375) instead. Sorry for the confusion!
At the webinar, I defined const data = Data({ mode: "list" }), and in onTap, I changed its value so that we’ll see the animation: data.mode = "detail". This works for a single card, but as soon as we attach the code override to a second card, both cards will be animated when we tap any card. The problem is shown in the following video:
This is issue happens because the animate attribute of all cards are always bound to the same value.
Requirements
Fix this issue. That is, only expand the card that’s tapped by the user.
Webinar video
Links
Assignments
1. Slider with code override
2. Improve card expand code override