javascript - 如何在knockoutjs中为if主体设置动画？

Question

我有一个名为“state”的 knockoutjs 可观察变量，我正在使用该变量隐藏和显示淘汰赛中的内容，if 条件如下：

<--if: state()=="login" -->
login content
<--/if-->

<--if: state()=="registration" -->
registration content
<--/if-->

每当状态变量发生变化时，它都会显示或隐藏内容。所以我的问题是我想在它隐藏或显示时添加切换行为的动画。我怎么能做到呢？

Answer 1

我为你做了一个快速的小提琴。

http://jsfiddle.net/ujSvb/1/

一个更动态的例子

http://jsfiddle.net/ujSvb/2/

Answer 2

我进一步更新了安德斯的小提琴以添加状态条件：

http://jsfiddle.net/ujSvb/3/

Answer 3

首先，我认为您的代码中可能有一些错误（可能只是将其复制错误），但应该是：

<-- ko if: state()=="login" -->
login content
<--/ko-->

<-- ko if: state()=="registration" -->
registration content
<--/ko-->

其次，如果您可以将 jQuery 与元素绑定一起使用，而不是使用虚拟元素，例如：

<div data-bind="if: state()=="login">

您可以利用 Knockout 的bindingHandlers。我创建了一个 ifTransition 绑定，它可以满足您的需求。这是一个使用 bindingHandler 的小提琴和它的一个示例：

http://jsfiddle.net/Rynan/vtPT8/

更新

好的，我更新了我的小提琴以利用虚拟元素，但您仍然必须将登录和注册内容包装在 div 中以获得您正在寻找的过渡效果。与您的评论保持一致，在状态更改为显示这些特定内容所需的任何状态之前，该 div 不会被渲染，因此在不处于正确状态时不会占用太多内存。

Answer 4

投票最多的答案不是解决方案，因为它不会取消渲染元素。

奥斯汀的答案似乎根本不起作用。

请参阅我的回复： “with”绑定更新之前的动画

对于我发现的一个干净的解决方法，用大致等效的“模板”绑定替换“if”和“with”。