How to show / hide animated component in Aurelia

Question

I have a subcomponent that I would like to show / hide in an animated form, just like the Bootstrap collapse component. The button that causes visibility is in appearance (not inside a subspecies).

When using basic syntax

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

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

Proposition 1 - Using Aurelia Animation

I tried to add class='au-animate' without effect (aurelia-animator-css was also included in main.js for this).

Proposition 2 - Use Bootstrap

Another possible solution could be to use Bootstrap and pass the second parameter (visible) to the component, and then the component somehow controls this variable and calls $('.collapse').collapse('toggle') . How could I pass two variables to model.bind ? And how to control it? Is it possible to use @bindable on the setter?

Proposition 3 - Use Bootstrap from an External Component

Maybe the easiest way is to call $('#subcomponentName .collapse').collapse('toggle') from the look? Is it ugly? I am referring to elements in a subview from an appearance that may cross some borders, but will the code be small?

Answer 1

(Answering my own question here, as more needs to be done to make it work)

To make this work:

First, after @Gusten's comment on if.bind instead of show.bind . Then add CSS classes for the animation. It also seems that the animated element (the one with the au-animate css class) should be the first element under the root <template> element.

So in my CSS:

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

and then the item:

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

(pay attention to au-animate + my own test class, the latter there just for easy element selection)

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