如何在挖空和组件之间应用过渡效果

Question

是否可以在knockout中使用require加载的组件之间进行动画过渡？那么当state（）发生变化时，组件会褪色/滑动到位吗？

我过去使用fadeVisible做过类似的事情，但这似乎不适用于amd / require和新组件api。有任何想法吗？谢谢:)）

注册

// 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' });

用法

   <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>

小提琴：How to apply transition effects between knockout amd components

Answer 1

创建一个自定义绑定，如下例所示：http://knockoutjs.com/examples/animatedTransitions.html

实际上，文档指出任何控件绑定属性必须放在组件之外：

  

因此，如果要使用控制流绑定（如if或foreach），则必须将其包装在自定义元素周围，而不是直接在自定义元素上使用

但是，自定义绑定不能在虚拟元素中使用，因此必须将一个组件放在包装div

中

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