msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

fix

Browse Source
pull/4999/head
pushkine 5 years ago
parent de2526739a
commit 0ec763a215
8 changed files with 44 additions and 38 deletions
Show Stats Download Patch File Download Diff File

2
src/compiler/compile/render_dom/wrappers/Element/index.ts
Unescape View File

@ -805,7 +805,7 @@ export default class ElementWrapper extends Wrapper {
block.chunks.destroy.push(b`if (detaching) ${outro_var}();`);
}
add_animation(block: Block) {
add_animation(block: Block, _intro: Transition) {
const [unfreeze_var, rect_var, stop_animation_var, name_var, params_var] = run_animation(this, block);

2
src/runtime/internal/index.ts
Unescape View File

@ -11,5 +11,5 @@ export * from './ssr';
export * from './transitions';
export * from './utils';
export * from './Component';
export * from './style_manager'
export * from './style_manager';
export * from './dev';

2
src/runtime/internal/style_manager.ts
Unescape View File

@ -18,7 +18,7 @@ export const animate_css = /*#__PURE__*/ methodify(
);
}
let rule = '{\n';
for (let t = 0, step = frame.rate / duration; t < 1; t += step) rule += `${100 * t}%{${css(t)}}\n`;
for (let t = 0, step = frame.rate / Math.max(frame.rate,duration); t < 1; t += step) rule += `${100 * t}%{${css(t)}}\n`;
rule += `100% {${css(1)}}\n}`;
// darkskyapp/string-hash

61
src/runtime/internal/transitions.ts
Unescape View File

@ -78,7 +78,7 @@ export const group_transition_out = (fn) => {
transition_group = transition_group.p;
};
type Rect = DOMRect | ClientRect;
type MeasureCallback = () => CssTransitionConfig
type MeasureCallback = (is_intro?: boolean) => CssTransitionConfig;
type CustomTransitionFunction = (node: HTMLElement, params: any) => MeasureCallback | CssTransitionConfig;
type AnimationFn = (node: Element, { from, to }: { from: Rect; to: Rect }, params: any) => CssTransitionConfig;
type StopResetReverseFn = (t?: number | 1 | -1) => StopResetReverseFn | void;
@ -140,8 +140,8 @@ export const run_animation = /*#__PURE__*/ methodify(function (this: HTMLElement
else running = false;
if (cancel_css) cancel_css();
if (cancel_raf) cancel_raf();
}
return stop
};
return stop;
});
export const run_in = /*#__PURE__*/ methodify(function (this: HTMLElement, fn: CustomTransitionFunction, params: CssTransitionConfig = {}) {
let config;
@ -152,7 +152,7 @@ export const run_in = /*#__PURE__*/ methodify(function (this: HTMLElement, fn: C
add_measure_callback(() => {
config = fn(this, params);
return (current_frame_time) => {
let { delay = 0, duration = 300, easing, tick, css }: CssTransitionConfig =
const { delay = 0, duration = 300, easing, tick, css }: CssTransitionConfig =
"function" === typeof config ? (config = config()) : config;
const runner = (fn) => balanced(fn, true, easing);
end_time = current_frame_time + delay + duration;
@ -167,8 +167,8 @@ export const run_in = /*#__PURE__*/ methodify(function (this: HTMLElement, fn: C
if (cancel_css) cancel_css();
if (cancel_raf) cancel_raf();
if (t && t >= end_time) this.dispatchEvent(custom_event(TransitionEvent.introend));
}
return stop
};
return stop;
});
export const run_out = /*#__PURE__*/ methodify(function (this: HTMLElement, fn: CustomTransitionFunction, params: CssTransitionConfig = {}) {
let config;
@ -181,7 +181,7 @@ export const run_out = /*#__PURE__*/ methodify(function (this: HTMLElement, fn:
add_measure_callback(() => {
config = fn(this, params);
return (current_frame_time) => {
let { delay = 0, duration = 300, easing, tick, css }: CssTransitionConfig =
const { delay = 0, duration = 300, easing, tick, css }: CssTransitionConfig =
"function" === typeof config ? (config = config()) : config;
const runner = (fn) => balanced(fn, false, easing);
end_time = current_frame_time + delay + duration;
@ -209,11 +209,11 @@ export const run_out = /*#__PURE__*/ methodify(function (this: HTMLElement, fn:
this.dispatchEvent(custom_event(TransitionEvent.outroend));
}
if (!--current_group.r) for (let i = 0, { c } = current_group, r = t === void 0;i < c.length;i++) c[i](r);
}
return stop
};
return stop;
});
export const create_bidirectional_transition = /*#__PURE__*/ methodify(function(this: HTMLElement, fn: CustomTransitionFunction, params?: CssTransitionConfig) {
let transition_delay;
let transition_delay = 0.0;
let pending = 0;
let prev;
@ -221,7 +221,7 @@ export const create_bidirectional_transition = /*#__PURE__*/ methodify(function(
let test_config;
if (typeof (test_config = (fn = new_fn)(this,(params = new_params))) === "function") test_config = test_config();
transition_delay = test_config.delay || 0.0;
}
};
u();
const run_transition = (is_intro: boolean, cancel_previous?) => {
@ -250,20 +250,20 @@ export const create_bidirectional_transition = /*#__PURE__*/ methodify(function(
config = fn(this, params);
return (current_frame_time) => {
let { tick, css, duration = 300.0, delay = 0.0, easing, strategy = EasingStrategy.balanced }: CssTransitionConfig =
"function" === typeof config ? (config = config()) : config;
"function" === typeof config ? (config = config(is_intro)) : config;
const solver = EasingStrategy.balanced === strategy ? balanced : EasingStrategy.reversed === strategy ? reversed : mirrored;
const runner = (fn) => solver(fn, is_intro, easing, ratio_left, 1);
if (delayed_start) delay = 0;
if (solver === reversed) duration -= prev_duration_left;
else if(solver === balanced) duration *= (1-ratio_left)
else if (solver === balanced) duration *= 1 - ratio_left;
else if (solver === mirrored) delay -= prev_duration_left;
start_time = current_frame_time + delay;
end_time = start_time + duration;
if (cancelled || duration < 1) return;
if (cancelled) return;
this.dispatchEvent(custom_event(is_intro ? TransitionEvent.introstart : TransitionEvent.outrostart));
if (css) cancel_css = animate_css(this, runner(css), duration, delay);
if (tick) cancel_raf = setTweenTimeout(stop, end_time, runner(tick), duration);
else cancel_raf = setFrameTimeout(stop, end_time);
if (tick) cancel_raf = setTweenTimeout(is_intro ? stop : noop, end_time, runner(tick), duration);
else if (is_intro) cancel_raf = setFrameTimeout(stop, end_time);
if (!is_intro) {
current_group.t = Math.max(end_time, current_group.t);
if (current_group.s.push(stop) === current_group.r) {
@ -274,9 +274,15 @@ export const create_bidirectional_transition = /*#__PURE__*/ methodify(function(
}, current_group.t);
}
}
setFrameTimeout(() => {
if (!cancelled || !pending) {
if (!is_intro && tick) tick(0, 1);
this.dispatchEvent(custom_event(is_intro ? TransitionEvent.introend : TransitionEvent.outroend));
}
}, end_time);
};
};
};
}
const cancel = (t) => {
if (!cancelled) {
@ -285,22 +291,23 @@ export const create_bidirectional_transition = /*#__PURE__*/ methodify(function(
if (cancel_css) cancel_css();
if (cancel_raf) cancel_raf();
}
if (!config) return;
if (!config || 1 === t) return;
const duration_left = end_time - t;
const next_ratio_left = 1 - duration_left / (end_time - start_time);
return duration_left > 0 && next_ratio_left > 0 && [duration_left, (1 - ratio_left) * (1 - (config.easing || ((v) => v))(next_ratio_left))];
};
const stop: StopResetReverseFn = (t?: number | -1 | 1) => {
if (t >= end_time) {
if (pending === 1 && (is_intro || t >= current_group.t)) cancel(t);
this.dispatchEvent(custom_event(is_intro ? TransitionEvent.introend : TransitionEvent.outroend));
}
if (running) {
running = false;
if (config && !is_intro && !--current_group.r) {
for (let i = 0, { c } = current_group, r = Math.abs(t) === 1; i < c.length; i++) {
c[i](r);
if (config) {
if (t && t >= end_time) {
if (pending === 1) cancel(1);
}
if (!is_intro) {
if (!--current_group.r) {
for (let i = 0, { c } = current_group, r = Math.abs(t) === 1; i < c.length; i++) c[i](r);
}
}
}
}
@ -316,7 +323,7 @@ export const create_bidirectional_transition = /*#__PURE__*/ methodify(function(
add_measure_callback(run(frame.time));
}
return stop
return stop;
};
return {
@ -330,7 +337,7 @@ export const create_bidirectional_transition = /*#__PURE__*/ methodify(function(
d() {
if (prev) prev(1);
}
}
};
});
export const run_duration = (duration, value1, value2?): number =>
typeof duration === "function" ? duration(value1, value2) : duration;

1
src/runtime/transition/index.ts
Unescape View File

@ -130,7 +130,6 @@ export function crossfade({ delay: default_delay = 0, duration: default_duration
b.delete(key);
return crossfade(from_node, to_node, params);
} else {
debugger
a.delete(key);
return fallback && fallback(to_node, params, is_intro);
}

2
test/runtime/index.js
Unescape View File

@ -243,7 +243,7 @@ describe("runtime", () => {
});
}
fs.readdirSync(`${__dirname}/samples`).reverse().forEach(dir => {
fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
runTest(dir, false);
runTest(dir, true);
});

4
test/runtime/samples/transition-css-in-out-in/_config.js
Unescape View File

@ -4,11 +4,11 @@ export default {
const div = target.querySelector('div');
const startsWith = (v, t = div.style.animation) => {
if (Array.isArray(v)) {
t.split(", ").forEach((r,i)=>startsWith(v[i],r))
t.split(", ").forEach((r,i) => startsWith(v[i],r));
} else {
assert.equal(t.slice(0, -1), v);
}
}
};
startsWith(`100ms linear 0ms 1 normal both running __svelte_3261048502`);

Write Preview
Loading…
Cancel
Save