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 to
• params: 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...