Run transitions in context of component

[Rich-Harris]

I just tried to do this, to prevent a transition from running when a component is first rendered (in a situation where skipIntroByDefault isn't an option):

export default {
  transitions: {
    grow(node, params) {
      const { started } = this.get();
      if (!started) {
        return { duration: 0 };
      }

      const style = getComputedStyle(node);
      const w = parseFloat(style.width);
      const h = parseFloat(style.height);

      return {
        duration: 600,
        easing: eases.cubicOut,
        css: t => `opacity: ${t}; width: ${t * w}px; height: ${t * h}px;`
      };
    }
  }
};   

That doesn't work, because transition functions aren't called with component as context. In this case it was easy to fix by passing started as a parameter, but that wouldn't always be the case.

We could change this line:

export function wrapTransition(component, node, fn, params, intro) {
-	let obj = fn(node, params);
+	let obj = fn.call(component, node, params);
	let duration;
	let ease;

Any reason not to?

[jacwright]

No, no reason not to.

[eyeseast]

This would've helped me on a project a while ago, where I needed to set a class on a ref as part of the transition.

I can think of lots of potentially dumb things someone might do with full access to the component during the transition -- setting or deleting things -- but maybe that's all fine.