javascript - How to apply transition effects between knockout amd components -

is possible have animated transition between components in knockout loaded using require? when state() changes, components faded/slid place?

i have done similar things in past fadevisible, not appear work amd/require , new components api. ideas? :)

registration

// register knockout components ko.components.register('breadcrumb', { require: './modules/breadcrumb/breadcrumb' }); ko.components.register('splash', { require: './modules/splash/splash' }); ko.components.register('catalogue', { require: './modules/catalogue/catalogue' }); ko.components.register('requests', { require: './modules/requests/requests' }); 

usage

   <div id="main">          <breadcrumb></breadcrumb>          <!-- ko if: state() === 'home' -->         <splash></splash>         <!-- /ko -->          <!-- ko if: state() === 'catalogue' -->         <catalogue></catalogue>         <!-- /ko -->          <!-- ko if: state() === 'requests' -->         <requests></requests>         <!-- /ko -->     </div> 

fiddle: how apply transition effects between knockout amd components

create custom binding in example: http://knockoutjs.com/examples/animatedtransitions.html

actually, documentation states control binding attribute must placed outside component:

therefore if want use control flow binding such if or foreach, must wrap around custom element rather using directly on custom element

however, custom bindings cannot used in virtual elements necessary place component inside wrapping div

http://knockoutjs.com/documentation/component-custom-elements.html