如何在淘汰amd组件之间应用过渡效果

How to apply transition effects between knockout amd components

本文关键字：之间 应用 过渡效果 组件 amd 淘汰      更新时间：2023-09-26

是否可以在使用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>

Fiddle：如何在敲除amd组件之间应用转换效果

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

实际上，文档规定任何控制绑定属性都必须放置在组件外部：

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

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

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

相关文章：