pull/1937/head
Richard Harris 6 years ago
parent 6dbac071f5
commit 7fbb71a788

@ -666,18 +666,18 @@ export default class ElementWrapper extends Wrapper {
const { component } = this.renderer;
const rect = block.getUniqueName('rect');
const animation = block.getUniqueName('animation');
const stop_animation = block.getUniqueName('stop_animation');
block.addVariable(rect);
block.addVariable(animation);
block.addVariable(stop_animation, '@noop');
block.builders.measure.addBlock(deindent`
${rect} = ${this.var}.getBoundingClientRect();
`);
block.builders.fix.addBlock(deindent`
@fixPosition(${this.var});
if (${animation}) ${animation}.stop();
@fix_position(${this.var});
${stop_animation}();
`);
const params = this.node.animation.expression ? this.node.animation.expression.render() : '{}';
@ -685,8 +685,8 @@ export default class ElementWrapper extends Wrapper {
const name = component.qualify(this.node.animation.name);
block.builders.animate.addBlock(deindent`
if (${animation}) ${animation}.stop();
${animation} = @wrapAnimation(${this.var}, ${rect}, ${name}, ${params});
${stop_animation}();
${stop_animation} = @animate(${this.var}, ${rect}, ${name}, ${params});
`);
}

@ -2,7 +2,7 @@ import { identity as linear, noop } from './utils.js';
import { loop } from './loop.js';
import { create_rule, delete_rule } from './style_manager.js';
export function wrapAnimation(node, from, fn, params) {
export function animate(node, from, fn, params) {
if (!from) return;
const to = node.getBoundingClientRect();
@ -68,19 +68,18 @@ export function wrapAnimation(node, from, fn, params) {
return true;
});
tick(0, 1);
if (delay) {
if (css) node.style.cssText += css(0, 1);
} else {
start();
}
// TODO just return the function
return { stop };
tick(0, 1);
return stop;
}
export function fixPosition(node) {
export function fix_position(node) {
const style = getComputedStyle(node);
if (style.position !== 'absolute' && style.position !== 'fixed') {

@ -105,19 +105,4 @@ export function measure(blocks) {
let i = blocks.length;
while (i--) rects[blocks[i].key] = blocks[i].node.getBoundingClientRect();
return rects;
}
export function animate(blocks, rects, fn, params) {
let i = blocks.length;
while (i--) {
const block = blocks[i];
const from = rects[block.key];
if (!from) continue;
const to = block.node.getBoundingClientRect();
if (from.left === to.left && from.right === to.right && from.top === to.top && from.bottom === to.bottom) continue;
}
}
Loading…
Cancel
Save