Animation - swap-order with if/else binding

Framework Knowledge
1

Hi

is it possible to animate the two elements of an if/else binding similarly to the view animation with swap-order ?

What I am after is something like this

<div swap-order="with" if.bind="!showConfig" class="au-animate animate-slide-in-right animate slide-out-left">
this is part 1</div>
  <div else  swap-order="with" class="au-animate animate-slide-in-right animate-slide-out-left">
    this is part 2
  </div>

part2 should slides in while part1 slides out

Thanks

1 Like
2

Nice Q!

This could be a nice feature. I think it’s doable and not complex, but probably take time to figure out. I think what could be done is to have Else (https://github.com/aurelia/templating-resources/blob/master/src/else.js) override _show and _hide method from IfCore (https://github.com/aurelia/templating-resources/blob/master/src/if-core.js)

3

Thanks for pointing me to these places

in templating-resources/src/if.js
i can find already this code

  _update(show) {
    if (this.animating) {
      return;
    }

    let promise;
    if (this.elseVm) {
      promise = show ? this._swap(this.elseVm, this) : this._swap(this, this.elseVm);
    } else {
      promise = show ? this._show() : this._hide();
    }

    if (promise) {
      this.animating = true;
      promise.then(() => {
        this.animating = false;
        if (this.condition !== this.showing) {
          this._update(this.condition);
        }
      });
    }
  }

  _swap(remove, add) {
    switch (this.swapOrder) {
    case 'before':
      return Promise.resolve(add._show()).then(() => remove._hide());
    case 'with':
      return Promise.all([ remove._hide(), add._show() ]);
    default:  // "after", default and unknown values
      let promise = remove._hide();
      return promise ? promise.then(() => add._show()) : add._show();
    }
  }

So it seems that this should already be working somehow - not sure how to use it, could not find the documentation. if somebody could give me an example ?

thanks a lot

4

this works :

<div if="condition.bind: showConfig; swap-order: with" class="animation"> part1</div>
  <div else class="animation">part 2</div>

:slightly_smiling_face:

1 Like
5

I see, it’s all @jods4 works. Haven’t used it so i didn’t know it already work. Glad you figured that out. Wanna right some doc on that ? :smile: