How to show/hide animated component in Aurelia

Question

I have a sub-component which I'd like to show/hide in an animated way, just like Bootstrap's collapse component. The button which triggers visiblity is located in the outer view (not inside the sub-view).

When using the basic syntax

<compose view-model="edit-x" model.bind="x" show.bind="shouldShow"></compose> 

(or the corresponding syntax with custom html element name), it works, but it just appears (not animated).

Suggestion 1 - use Aurelia animation

I did try to add a class='au-animate' with no effect (also included the aurelia-animator-css in the main.js for that).

Suggestion 2 - Use Bootstrap

Another possible solution could be perhaps to utilize Bootstrap, and pass in a second parameter (visible) to the component, then have the component in some way monitor that variable and call $('.collapse').collapse('toggle'). How would I then pass in two variables in model.bind? And how to monitor it? Can one use @bindable on a setter?

Suggestion 3 - Use Bootstrap from the outside component

Maybe the easiest would be to call $('#subcomponentName .collapse').collapse('toggle') from the outside view? It this ugly? I do reference elements in the sub-view from the outer view, which is maybe crossing some boundaries, but code will be small?

Answer 1

(Answering my own question here, as there was more to do to get it working)

Got this to work:

First by following @Gusten's comment about if.bind instead of show.bind. Then by adding CSS classes for animation. It also seems like the animated element (the one with au-animate css class) must be the first element below the root <template> element.

So in my CSS:

div.test.au-enter-active {
  -webkit-animation: fadeInRight 1s;
  animation: fadeInRight 1s;
}

and then the element:

<template>
  <div class="test au-animate">
  ...

(notice the au-animate + my own test class, the latter just there for easy selection of the element)

The fadeInRight CSS animation is defined elsewhere in the CSS file.