Lesson 16 of 21 · Motion
Values that move
motion declares a value that moves to its target in time. The expression after = is the target, as in a derived value. A write to open gives a new target, and the value moves there.ms is the time, and ease is the curve. A spring keeps its speed when the target changes in the middle of a move.translate-x-{x}px takes the value. A computed transform runs no layout, so the move is cheap on each target. With the "reduce motion" setting of the system, the value goes to its target at once.Your turn
- Add this line under state open:
- motion x(ms: 600, ease: "ease-spring") = open ? 200.0 : 0.0;
- Add translate-x-{x}px to the style of the box.
- Press the button two times fast. The box turns back without a jump.
Preview
1 error
The sandbox needs a browser.