2

ReactCSSTransitionGroup を使用してアニメーションを実行していますが、意味をなさない興味深いものを見つけました。

以下の例では、 をクリックすると、正常に動作するの<div className="HeartControl">が更新されます。(ただし、効果を達成するために必ずしも ReactCSSTransitionGroup が必要であるとは限りません)。height<div className="HeartFill">

興味深いことに、クリックすると<div key={this.state.heartHeight} className="HeartFill" style={styleHeartFill}></div>、既存のコンポーネントの後に新しい React コンポーネント ID が追加された別のコンポーネントが表示されます。

しかし、そこには常に1つしかないと思い<div className="HeartFill">ます。

どうしてこうなった？？？

PS。数回クリックすると、結果は次のようになります。

  <span data-reactid=".0.4.$8de89f4f1403aee7a963122b06de3712.3.0.0.2">
<div class="HeartFill HeartFill-enter HeartFill-enter-active" style="position:absolute;bottom:0;left:0;width:30px;height:3.5999999999999996px;background-color:#D64541;" data-reactid=".0.4.$8de89f4f1403aee7a963122b06de3712.3.0.0.2.$=1$6:0"></div>
<div class="HeartFill HeartFill-enter HeartFill-enter-active" style="position:absolute;bottom:0;left:0;width:30px;height:3px;background-color:#D64541;" data-reactid=".0.4.$8de89f4f1403aee7a963122b06de3712.3.0.0.2.$=1$5:0"></div>


    var HEIGHT_HEART = 30;
   var NUM_HEART_MAX = 50;

   var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;


  var Heart = React.createClass({

getInitialState: function() {
    return {
        heartHeight: 0
    };
},

onClick: function(e) {
    var currentHeartHeight = this.state.heartHeight;
    this.setState({
        heartHeight: currentHeartHeight + 1
    });
},

render: function() {

    var styleHeartFill = {
        'position': 'absolute',
        'bottom': 0,
        'left': 0,
        'width': 30,
        'height': this.state.heartHeight / NUM_HEART_MAX * HEIGHT_HEART,
        'background-color': '#D64541'
    };


    return (
        <div className="Heart" >
                <div className="HeartControl" onClick={this.onClick}>
                    <i className="fa fa-angle-up" />
                </div>
            <img src="heart.png" className="HeartOutline" />
            <ReactCSSTransitionGroup transitionName="HeartFill">
                <div key={this.state.heartHeight} className="HeartFill" style={styleHeartFill}></div>
            </ReactCSSTransitionGroup>
        </div>
    );
 }

     });
    React.renderComponent(<Heart />, document.getElementById('Heart'));

`

4

5 に答える 5

0

ReactCSSTransitionGroup は 2 番目の要素を作成する必要があります

指定されたcssアニメーションが終了したときに削除するか、cssにアニメーションがないときに警告を出力します

理解を深めるために、低レベル API を参照してください: http://facebook.github.io/react/docs/animation.html (ページの下部)

于 2014-08-30T02:21:23.577 に答える