add crossfade and flip functions

[Rich-Harris]

Ref #2241.

Not sure if these are ready to be promoted to built-in functions yet. I'm encountering occasional hard-to-reproduce positioning bugs, and crossfade doesn't handle changes in size (but maybe that's ok given its intended use? I think we can accommodate size changes, it just involves style.transformOrigin and some arithmetic).

Also, if you look really closely the crossfade opacity isn't quite right — since one side goes from 0 to 1 and the other goes from 1 to 0, in the middle they're both 0.5 which results in a total opacity of 0.75, when you really want the total opacity to stay at 1 throughout. Unfortunately the only way to achieve that is to use this blending formula which requires that you know which element is on top, which you could maybe do with getElementsFromPoint but otherwise you have to figure out stacking order using something like https://gitlab.com/Rich-Harris/stacking-order.

On the other hand, these effects are difficult to achieve by hand, so maybe we should include these functions and treat any updates as bugfixes so as not to anger the semver gods? At the very least I think we have the right API now:

const [send, receive] = crossfade({
  // can supply default parameters
  easing: elasticOut,

  // duration can be a number or a function based on distance to travel
  duration: distance => Math.sqrt(distance) * 50,
  
  fallback: (node, params, intro) => {
    // can return different transitions based on `intro`, if desired.
    // structuring `params` for fallback transitions is easily
    // done in whatever way the user sees fit
  }
});

[codecov-io]

Codecov Report

Merging #2247 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #2247   +/-   ##
=======================================
  Coverage   91.83%   91.83%           
=======================================
  Files           1        1           
  Lines          49       49           
=======================================
  Hits           45       45           
  Misses          4        4

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 81d33a2...eff94ac. Read the comment docs.

[arxpoetica]

I'm agnostic. Could be persuaded either way.