The contents of an animated-if block isn't preserved during animation about ember-animated HOT 8 OPEN

I think it would be fine to yield out the boolean value, the same way animated-value does it.

Otherwise you can say:

{{#animated-value isShowing as |currentlyShowing|}}
  {{#if currentlyShowing}}
    <p>isShowing is {{currentlyShowing}}</p>
  {{/if}}
{{/animated-value}}

from ember-animated.

I just stumbled into the same issue. I was using animated-if to display a modal dialog roughly like this:

<Modal @isVisible={{data}}>
  <DataViewer @data={{data}}>
</Modal>

I discovered Ed's solution before I found this issue here, but it's not really a good solution either. Example:

{{#animated-if isShowing}}
  <p>isShowing is {{computedIsShowing}}</p>
{{/animated-if}}

If you use a computed property based on the animated-if predicate it would still fail.

Is there a solution to this other than using the as |data| workaround? Would it be possible to stop DOM updates for removed sprites until they change their state to kept again? I have a feeling that this would require significant changes to the library, but that would be the behavior that I expect from animated-if.

from ember-animated.

from ember-animated.

Well, the more I think about it, there is probably a solution in the library itself. It would be interesting to try it.

We would use an AST transform to find all the paths inside the blocks that are passed to animator components, and rewrite them so they're wrapped in a (private) helper that we provide. The helper can freeze its output during critical times. It would probably have a rendering performance impact, though it's hard to guess if it's significant without trying it.

A more efficient variant would use Ember private API to implement the helper, so the helper has direct access to glimmer references, in which case we can probably make it very cheap. Because instead of rerunning our helper all over the place, we could just establish a reference that has the right updating behavior, and glimmer will know what to do with it.

from ember-animated.

can you elaborate on how that helper would look like?

from ember-animated.

It would be a class-based helper so it can control when it recomputes.

When nothing is animating, it would output its input. But when things are animating (which it would determined based on some subscription to the -ea-motion service), it would keep outputting a constant value, even if its input changes, until the animation ends and then it recomputes to output its real input again.

The AST Transform may be annoying to get right because of the remaining ambiguity in curlies. We could consider making this new thing a glimmer-component-only feature, because I'm pretty sure the ambiguity isn't allowed there (you're required to access arguments via @ and I think you're required to access component properties via this.). But the idea would be to rewrite all values (not component invocations or helper invocations, which is why there's an ambiguity issue) that appear inside the block passed to animated-if (and the other animators) like:

{{#animated-if @active}}
  <div class={{if @active "active"}}>{{this.description}}</div>
{{/if}}

{{!-- to --}}

{{#animated-if @active}}
  <div class={{if (-ea-guard @active) "active"}}>{{-ea-guard this.description}}</div>
{{/if}}

Since rendering always happens top-down, a change that causes animation will hit ancestors of the helper first, which can warn the helper via the service before the corresponding change comes down to the helper itself and tries to make it recompute.

The more performant version of the -ea-guard helper would use private API to directly access the reference system. Instead of running each time its input changes and deciding which output to use, the first time it runs it would setup a glimmer reference that only invalidates when it's told to invalidate.

from ember-animated.

I checked and I was wrong about glimmer component. It still allows the ambiguous this fallback.

Instead we could require people to use the (now default) template lint rule that requires explicit this.

from ember-animated.

Meanwhile, supporting

{{#animated-if this.isShowing as |current|}}
  <p>isShowing is {{current}}</p>
{{/animated-if}}

would help in many cases, right?

or is it strictly the same as this?

{{#animated-value this.isShowing as |current|}}
  {{#if current}}
    <p>isShowing is {{current}}</p>
  {{/if}}
{{/animated-value}}

from ember-animated.