Skip to content

Commit fffb305

Browse files
authored
fix: prevent div/0 when generating transition keyframes (#13058)
closes #13047
1 parent 77096a1 commit fffb305

File tree

2 files changed

+32
-25
lines changed

2 files changed

+32
-25
lines changed

.changeset/few-walls-check.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': patch
3+
---
4+
5+
fix: prevent div/0 when generating transition keyframes

packages/svelte/src/internal/client/dom/elements/transitions.js

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -358,13 +358,34 @@ function animate(element, options, counterpart, t2, on_finish) {
358358
var duration = /** @type {number} */ (options.duration) * Math.abs(delta);
359359
var keyframes = [];
360360

361-
if (css) {
362-
var n = Math.ceil(duration / (1000 / 60)); // `n` must be an integer, or we risk missing the `t2` value
361+
if (duration > 0) {
362+
if (css) {
363+
var n = Math.ceil(duration / (1000 / 60)); // `n` must be an integer, or we risk missing the `t2` value
364+
365+
for (var i = 0; i <= n; i += 1) {
366+
var t = t1 + delta * easing(i / n);
367+
var styles = css(t, 1 - t);
368+
keyframes.push(css_to_keyframe(styles));
369+
}
370+
}
371+
372+
get_t = () => {
373+
var time = /** @type {number} */ (
374+
/** @type {globalThis.Animation} */ (animation).currentTime
375+
);
376+
377+
return t1 + delta * easing(time / duration);
378+
};
363379

364-
for (var i = 0; i <= n; i += 1) {
365-
var t = t1 + delta * easing(i / n);
366-
var styles = css(t, 1 - t);
367-
keyframes.push(css_to_keyframe(styles));
380+
if (tick) {
381+
loop(() => {
382+
if (animation.playState !== 'running') return false;
383+
384+
var t = get_t();
385+
tick(t, 1 - t);
386+
387+
return true;
388+
});
368389
}
369390
}
370391

@@ -375,25 +396,6 @@ function animate(element, options, counterpart, t2, on_finish) {
375396
tick?.(t2, 1 - t2);
376397
on_finish();
377398
};
378-
379-
get_t = () => {
380-
var time = /** @type {number} */ (
381-
/** @type {globalThis.Animation} */ (animation).currentTime
382-
);
383-
384-
return t1 + delta * easing(time / duration);
385-
};
386-
387-
if (tick) {
388-
loop(() => {
389-
if (animation.playState !== 'running') return false;
390-
391-
var t = get_t();
392-
tick(t, 1 - t);
393-
394-
return true;
395-
});
396-
}
397399
};
398400

399401
return {

0 commit comments

Comments
 (0)