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?