The transition contract
Before we dive into creating custom transitions, it’s essential to understand the foundation upon which they are built: the transition contract.
If you’ve read Chapter 9, you’ll be familiar with the concept of a store contract. Just as a store is an object that adheres to a specific store contract, a transition is a function that follows a transition contract. By understanding and adhering to these contracts, you can create custom transitions that integrate seamlessly with Svelte’s built-in transition system.
The transition contract consists of a single function that is responsible for the transition. This function accepts two arguments:
node: The target DOM element that the transition will be applied toparams: An object containing configuration options
The function should return an object that describes how the transition should be executed. We will delve into the details of this returned object later in...
