Come mostrare/nascondere il componente animato in Aurelia

Question

Ho un sottocomponente che mi piacerebbe mostrare/nascondere in modo animato, proprio come il componente collapse di Bootstrap. Il pulsante che attiva la visiblity si trova nella vista esterna (non all'interno della sotto-vista).

Quando si utilizza la sintassi di base

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

(o il corrispondente sintassi con html personalizzato nome di elemento), funziona, ma sembra proprio (non animato).

Suggerimento 1 - utilizzare Aurelia animazione

ho provato ad aggiungere un class='au-animate' senza effetto (incluso anche l'Aurelia-animatore-css nelle main.js per quello).

Proposta 2 - Uso Bootstrap

Un'altra possibile soluzione potrebbe essere forse utilizzare Bootstrap, e passare un secondo parametro (visibile) al componente, allora il componente in qualche modo monitorare tale variabile e chiamata $('.collapse').collapse('toggle'). Come potrei quindi passare in due variabili in model.bind? E come monitorarlo? Si può usare @bindable su un setter?

Suggerimento 3 - Utilizzare Bootstrap dal componente esterno

Forse il più semplice sarebbe quella di chiamare $('#subcomponentName .collapse').collapse('toggle') dalla vista dall'esterno? E 'così brutto? Faccio riferimento agli elementi nella sottoview dalla vista esterna, che sta forse attraversando alcuni confini, ma il codice sarà piccolo?

Answer 1

(rispondendo alla mia domanda proprio qui, come c'era più da fare per farlo funzionare)

ottenuto questo al lavoro:

prima di tutto seguendo @ commenti su if.bind invece di show.bind di Gusten. Quindi aggiungendo le classi CSS per l'animazione. Sembra anche che l'elemento animato (quello con la classe au-animate css) debba essere il primo elemento sotto l'elemento radice <template>.

Così nel mio CSS:

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

e quindi l'elemento:

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

(notare il + mia test classe au-animate, quest'ultimo solo lì per una facile selezione dell'elemento)

L'animazione fadeInRight è definita altrove nel file CSS.