Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
<script>
import { fade, crossfade } from 'svelte/transition';
import { flip } from 'svelte/animate';
const incoming = new Map();
const outgoing = new Map();

const messages = [];
let msgIndex = 0;
function addMessage(description, key, msg) {
messages.unshift(`${msgIndex++} ${description} "${key}": ${msg}`);
messages = messages;
}
function coordinatedTransition(myNode, otherRect, options) {
// crossFade gets the bounding rect of both nodes and tweens between them here.
let myRect = myNode.getBoundingClientRect();

const style = getComputedStyle(myNode);
const transform = style.transform === 'none' ? '' : style.transform;

let deltaX = otherRect.left - myRect.left;
let deltaY = otherRect.top - myRect.top;
return {
duration: 300,
css: (t, u) => {
let x = deltaX * u;
let y = deltaY * u;
let style = `transform-origin:top left;
transform: ${transform} translate(${x}px, ${y}px);
opacity:${t}`;
return style;
}
};
}

Error compiling App.svelte

Cannot assign to constant
https://svelte.dev/e/constant_assignment
line 13 column 2
/* Cannot assign to constant
https://svelte.dev/e/constant_assignment */
result = svelte.compile(source, {
generate: ,
});
/* Cannot assign to constant
https://svelte.dev/e/constant_assignment */
Deferred Transitions Example • Playground • Svelte