Jak pokazać/ukryć animowany komponent w Aurelia

Question

Mam podkomponent, który chciałbym pokazać/ukryć w animowany sposób, tak jak komponent Bootstrap'a zwijania. Przycisk uruchamiający widoczność znajduje się w widoku zewnętrznym (nie wewnątrz podprzestrzenia).

Podczas korzystania z podstawową składnię

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

(lub odpowiednią składnię z niestandardowych html nazwy element), to działa, ale po prostu wydaje (nie animowane).

Propozycja 1 - użyj animacja Aurelia

Próbowałem dodać class='au-animate' bez efektu (w zestawie również Aurelia-animator-css w main.js do tego).

Propozycja 2 - Wykorzystanie bootstrap

Innym możliwym rozwiązaniem może być na przykład w celu wykorzystania bootstrap i przechodzi w drugi parametr (widoczne) do składnika, wtedy składnik w pewien sposób kontrolować tej zmiennej i połączenia $('.collapse').collapse('toggle'). Jak przekażę dwie zmienne w model.bind? I jak to monitorować? Czy można użyć @bindable dla settera ?

Propozycja 3 - Korzystanie z zewnątrz Bootstrap komponentu

Może najłatwiej byłoby nazwać $('#subcomponentName .collapse').collapse('toggle') z widokiem na zewnątrz? To takie brzydkie? Robię odnośniki w podglądzie z widoku zewnętrznego, który może przekracza pewne granice, ale kod będzie mały?

Answer 1

(Odpowiadając na moje własne pytanie tutaj, ponieważ nie było więcej zrobić, aby dostać pracy)

Got to do pracy:

Pierwszy wykonując @ komentarzu Gusten za około if.bind zamiast show.bind. Następnie dodając klasy CSS do animacji. Wygląda również na to, że element animowany (ten z klasą css au-animate) musi być pierwszym elementem poniżej elementu root <template>.

Więc w moim CSS:

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

a następnie element:

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

(zauważenie + moje własne test klasę au-animate, ten ostatni właśnie tam łatwego wyboru elementu)

Animacja CSS fadeInRight jest zdefiniowana w innym miejscu pliku CSS.