How to apply transition effects between knockout amd components

Question

Is it possible to have an animated transition between components in knockout which are loaded using require? So when state() changes, components are faded/slid into place?

I have done similar things in the past with fadeVisible, but this does not appear to work with amd/require and the new components api. Any ideas? Thanks :)

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 to apply transition effects between knockout amd components

Answer 1

Create a custom binding like in this example: http://knockoutjs.com/examples/animatedTransitions.html

Actually, the documentation states that any control binding attribute must be placed outside a component:

Therefore if you want to use a control flow binding such as if or foreach, then you must wrap it around your custom element rather than using it directly on the custom element

However, custom bindings cannot be used in virtual elements so it is necessary to place a component inside a wrapping div

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