A good user interface (UI) is essential for making a successful web application. Svelte offers fast, reactive, and simplified UIs which can be made more interactive with the help of CSS. We can add transitions, animations, and designs using CSS to make the UI of our web application more appealing. In Svelte, we can create custom CSS transitions.
The following is the syntax to create custom transitions in Svelte:
<script>//Svelte transition functionfunction rotates(node,{ duration }){return {duration,css: timer=> {return `transform: rotateX(${timer * 360}deg);`}};}</script><!-- Transition Function Usage --><label in:rotates="{{duration: 2000}}">Yayy, First Transition!</label>
Both Svelte and CSS are powerful languages for creating exceptional UIs, when we combine them together amazing things can be created. Let's see an example where we can create a custom flipping transition, which is triggered by clicking the checkbox.
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 /wJv+riuzREqgwAAAABJRU5ErkJggg==
Line 2: We define the custom
variable, which is used in the conditional statement.
Line 3: Here, we create a Svelte transition function that contains two arguments:
Node: This is the node on which the defined transition is applied.
Parameters: Any parameters which control the transition. In our case, duration
, and is returned by the function.
Lines 4–10: The return value is an object which has CSS transition properties. In our case, it is a 360-degree rotation of the component.
Line 26: We have an input
event here which makes the custom
variable's value true
once clicked.
Lines 30–32: Here we have Svelte's conditional statement. If the condition is met, the component inside is displayed along with the custom transition.
Free Resources