React - 項目離開DOM時的Jumpy動畫

我在標籤列表上使用ReactCSSTransitionGroup，因此當用戶移除某個標籤時，它會淡出。我注意到了一些跳動，所以我放慢了動畫轉換的持續時間，看看發生了什麼。React - 項目離開DOM時的Jumpy動畫

的標籤轉移以一種奇怪的方式，並且由於寬度是不同的，它看起來有點當它消失不和諧。這只是React動畫的工作原理，還是我做錯了什麼？

下面是全速（.3s）的另一個示例。下面

代碼：

let ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 

TagList = React.createClass({ 
    displayName: 'TagList', 

    propTypes: { 
    tags: React.PropTypes.array, 
    onTagClick: React.PropTypes.func.isRequired 
    }, 

    render() { 
    let tags; 

    if (!this.props.tags) { 
     return false; 
    } 

    tags = this.props.tags.map((tag, i) => { 
     return <Tag key={i} 
        index={i} 
        onTagClick={this.props.onTagClick}>{tag}</Tag> 
    }); 

    return (
     <div className="tag-list"> 
     <ReactCSSTransitionGroup transitionName="tag"> 
      {tags} 
     </ReactCSSTransitionGroup> 
     </div> 
    ) 
    } 
}); 

Tag = React.createClass({ 
    displayName: 'Tag', 

    propTypes: { 
    onTagClick: React.PropTypes.func.isRequired 
    }, 

    render() { 
    return (
     <span className="tag" 
      onClick={this.props.onTagClick.bind(null, this.props.index)}> 
     <span className="tag-name">{this.props.children}</span> 
     </span> 
    ) 
    } 
});

來源

2015-09-21 ffxsam

你可以設置的演示你的關於輸出？ JSfiddle.net或http://plunkr.co？ –

@ManojKumar我在帖子中添加了一些代碼。 – ffxsam

陣營使用添加/刪除元素的key以確定哪個DOM節點的動畫。您正在使用標記的數組索引作爲鍵，但這在整個呈現中不穩定。

例如，如果你有數組

[1, 2, 3, 4, 5]

和你指數2刪除項目，你留下了

[1, 2, 4, 5]

然而，才反應過來，它看起來像現在4在指數2;將被刪除的key爲4，因爲陣列中現在只有四個項目。這就是爲什麼在第一個示例中，您單擊的標籤已刪除，但淡出的DOM節點用於數組中的最後一個項目。

的解決方案是使用一鍵不爲每個標籤更改（例如ID等等，即使你只是產生在客戶端上唯一的ID。）

來源

2015-09-21 04:27:39

工作正常！謝謝！ – ffxsam

React - 項目離開DOM時的Jumpy動畫

回答

相關問題