javascript - 如何在 knockout 和组件之间应用过渡效果

Question

是否可以在使用 require 加载的 knockout 组件之间进行动画过渡？那么当 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>

fiddle :How to apply transition effects between knockout amd components

Answer 1

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

实际上，文档规定任何控件绑定(bind)属性必须放置在组件外部:

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

但是，自定义绑定(bind)不能在虚拟元素中使用，因此有必要将组件放置在包装 div 内

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