Question

我有一个叫做“状态”的knockoutjs可观察变量，我正在使用该变量来隐藏和显示淘汰内容，如果条件如下：

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

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

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

Answer 1

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

获取更具动态性的示例

Answer 2

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

<-- 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的一个小提琴，以及它的一个实例：

更新

好的，我更新了我的小提琴以利用虚拟元素，但您仍然需要将您的登录和注册内容包装在div中以获得您正在寻找的过渡效果。保持你的评论，在状态变为显示那些特定内容所需的任何内容之前不会呈现该div，因此当它没有处于正确的状态时它将不会占用太多内存。

Answer 3

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

Answer 4

最高投票答案不是解决方案，因为它不会放弃元素。

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

我已经发现了一个干净的解决方法，用大致相当于'模板'的绑定替换'if'和'with'。