WebAnimation down not work on IE11

[economatics]

There is a bug within WebAnimation. It relates to IE11. On rerender of a widget that includes animation in its render function, WebAnimation fails with a null pointer in its afterRender function. Seen with following animation:

const open: AnimationProperties = {
      id: "open",
      effects: [
        { height: "0px", width: "0px", opacity: "0" },
        { height: `${height}px`, width: `${width}px`, opacity: "1" }
      ],
      controls: {
        play: !this.opened,
        onFinish: this.whenOpened
      },
      timing: {
        duration: 500
      }
    };

    const close: AnimationProperties = {
      id: "close",
      effects: [
        { height: `${height}px`, width: `${width}px`, opacity: "1" },
        { height: "0px", width: "0px", opacity: "0" }
      ],
      controls: {
        play: this.close,
        onFinish: this.whenClosed
      },
      timing: {
        duration: 200
      }
    };

    const animation = this.close ? close : open;
    this.meta(WebAnimation).animate(userMenuKey, animation);

[smhigley]

@economatics I've been unable to reproduce the error.

I've made a simple sandbox here, which runs in IE11: https://codesandbox.io/s/5wqzlk52px. If possible, could you fork and update it to show the error?

[economatics]

@smhigley thanx for your engagement on this. I forked it to something similar we got implemented: https://codesandbox.io/s/1yjr9n6893

As you can see animation does not work. But it does not fail with this null pointer in afterRender. I'm not sure why. Maybe because you use widget-core 0.10.0 ? With 0.9.6 it fails in afterRender within the enclosed forEach loop. "this" is not defined anymore.

[smhigley]

@economatics the issue in the linked sandbox is that you are attempting to animate a node as it is added and removed from the DOM. This can be solved by animating root instead of content. With that modification, it works for me in both Chrome and IE11:
https://codesandbox.io/s/005w38p550