如何在Knockout.js中對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

首先，我認為您的代碼可能存在一些錯誤（可能是因為錯誤而將其復制），但應該是：

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

我進一步更新了Anders的小提琴以添加狀態條件：

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

Answer 4

投票最多的答案不是解決方案，因為它不會取消呈現元素。

奧斯汀的答案似乎根本沒有用。

請參閱以下內容中的我的回復： “綁定”更新之前的動畫

我發現了一個干凈的解決方法，將“ if”和“ with”替換為大致等效的“模板”綁定。