🚴♂️ Level 1️⃣ - Using
transition:🚗 Level 2️⃣ - The
transition: contract🚀 Level 3️⃣ - Compile
transition: in your Head
@lihautan
- 👨🏻💻 Frontend engineer at Shopee Singapore
- 🇲🇾 Grew up in Penang, Malaysia
- 🛠 Svelte Maintainer
🚴♂️ 1️⃣ Using transition:
a
b
<script> import { fly, slide, scale, blur } from 'svelte/transition';</script><div transition:fly={{x: 50, y:50}} /><div transition:slide /><div transition:scale={{start: 0.5}} /><div transition:blur={{amount: 2}} />🚗 2️⃣ The transition: contract
The transition: contract
function transition(node, params) {
return {
delay: 0, // delay in ms
duration: 300, // duration in ms
easing: linear, // easing function
css: (t, u) => { // css transition
return `transform: translateX(${t * 100}px)`;
},
tick: (t, u) => { // callback
node.styles.color = getColor(t);
},
}
}The transition: contract
function transition(node, params) {
return function () {
return {
delay: 0, // delay in ms
duration: 300, // duration in ms
easing: linear, // easing function
css: (t, u) => { // css transition
return `transform: translateX(${t * 100}px)`;
},
tick: (t, u) => { // callback
node.styles.color = getColor(t);
},
}
}
}The transition: contract
function transition(node, params) {
return {
delay: params.delay, // delay in ms
duration: params.duration, // duration in ms
easing: params.easing, // easing function
css: (t, u) => { // css transition
return `transform: translateX(${t * 100}px)`;
},
tick: (t, u) => { // callback
node.styles.color = getColor(t);
},
}
}The transition: contract
function transition(node, params) {
return {
delay: 0, // delay in ms
duration: 300, // duration in ms
easing: linear, // easing function
css: (t, u) => { // css transition
return `transform: translateX(${t * 100}px)`;
},
tick: (t, u) => { // callback
node.styles.color = getColor(t);
},
}
}🚀 3️⃣ Compile transition: in your Head
📚 Compile Svelte in your head
CSS Transition
div {
opacity: 1;
transition: opacity 1s ease 0.5s;
}
div.transparent {
opacity: 0;
}TEST
<div>TEST</div>CSS Animations
TEXT
JS Animations
transition: in Vanilla JS
transition: in compiled JS
Source code reference
src/runtime/internal/transitions.ts
transition_in,transition_outcreate_in_transition,create_out_transition,create_bidirectional_transition
src/runtime/internal/style_manager.ts
create_rule,delete_rule,clear_rules
src/runtime/transition/index.ts (svelte/transition)
fade,fly,slide,crossfade, ...
🚴♂️ Level 1️⃣ - Using
transition:🚗 Level 2️⃣ - The
transition: contract🚀 Level 3️⃣ - Compile
transition: in your HeadThank you
@lihautan