title: How to show/hide animated component in Aurelia
body: <p>I have a sub-component which I'd like to show/hide in an animated way, just like Bootstrap's <em>collapse</em> component. The button which triggers visiblity is located in the outer view (not inside the sub-view).</p>
  
  <p>When using the basic syntax</p>
  
  <pre><code>&lt;compose view-model="edit-x" model.bind="x" show.bind="shouldShow"&gt;&lt;/compose&gt; 
  </code></pre>
  
  <p>(or the corresponding syntax with custom html element name), it works, but it just appears (not animated).</p>
  
  <p><strong>Suggestion 1 - use Aurelia animation</strong></p>
  
  <p>I did try to add a <code>class='au-animate'</code> with no effect (also included the aurelia-animator-css in the main.js for that).</p>
  
  <p><strong>Suggestion 2 - Use Bootstrap</strong></p>
  
  <p>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 <code>$('.collapse').collapse('toggle')</code>. How would I then pass in two variables in <code>model.bind</code>? And how to monitor it? Can one use <code>@bindable</code> on a <em>setter</em>?</p>
  
  <p><strong>Suggestion 3 - Use Bootstrap from the outside component</strong></p>
  
  <p>Maybe the easiest would be to call <code>$('#subcomponentName .collapse').collapse('toggle')</code> 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?</p>