Anonymous Anonymous - 5 months ago 18
CSS Question

how to create slider effect on rendering new elements from state in reactjs?

When switching data by selecting slice from an array, putting it into state and rendering by

setInterval
, I try to create a slider effect by clicking up and down arrows:

enter image description here

UPDATE START

I was finally able to create slider using technique from this codepen:
http://codepen.io/sergiodxa/pen/aOYdeN

UPDATE END

var MainContainer = React.createClass({
getInitialState: function () {
return {
position: 0,
max_elements: 3,
data: [],
source: Array.prototype.slice.call([1, 2, 3, 4, 5, 6, 7]).reverse()
}
},
componentDidMount: function () {
setInterval(this.updateState, 10);
},
arrowUp: function () {
if (this.state.position > 0) {
this.state.position--;
this.updateState();
}

},
arrowDown: function () {
if (this.state.source.length - this.state.position > this.state.max_elements) {
this.state.position++;
this.updateState();
}

},
updateState: function () {

data = this.state.source.slice(this.state.position, this.state.position + this.state.max_elements)
this.setState({data: data});
console.log(this.state.data);
},

render: function () {
var Items = this.state.data.map(function (item, i) {
return (
<div key={i}>
<SimpleItem message={item} active={i == 0 ? true : false}/>
</div>
);
}, this);

return (
<div>
{Items}
<ArrowUp onClick={this.arrowUp}/>
<ArrowDown onClick={this.arrowDown}/>
</div>
);
}
});

var ArrowUp = React.createClass({
render: function () {
return (
<a href="#" className="glyphicon glyphicon-arrow-up" onClick={this.props.onClick}>
</a>
);
}
});

var ArrowDown = React.createClass({
render: function () {
return (
<a href="#" className="glyphicon glyphicon-arrow-down" onClick={this.props.onClick}>
</a>
);
}
});

var SimpleItem = React.createClass({
render: function () {
var className = "well well-lg"
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
className = this.props.active ? className + " active" : className;
return (
<ReactCSSTransitionGroup
transitionName="example"
transitionAppear={true} transitionAppearTimeout={500}
transitionEnter={false} transitionLeave={false}
>
<div className={className}>
{this.props.message}
</div>
</ReactCSSTransitionGroup>
);
}

});
ReactDOM.render(<MainContainer />, document.getElementById('container'));


The animation is only seen when components render for the first time, re-rendered elements won't animate, for some reason.

My styles are:

.example-appear {
opacity: 0.01;
}

.example-appear.example-appear-active {
opacity: 1;
transition: opacity 500ms ease-in;
}


I'm not a frontend guy so any hint or link would be much appreciated.

Answer

I noticed a couple of things wrong. This first is in you arrowUp and down functions. State always needs to be set using the setState() function. From the docs:

NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

The second thing is that the children of ReactTransition group must have a unique key. When this key changes that is what tells react transition group to animate.

<ReactCSSTransitionGroup
  transitionName="example"
  transitionAppear={true} transitionAppearTimeout={500}
  transitionEnter={false} transitionLeave={false}
  >
    {*/ This div needs a key. When the key changes react transition group animates. /*}
    <div key={this.state.currentItem} className={className}>
        {this.props.message}
    </div>
</ReactCSSTransitionGroup>

In the above example I've set the key to this.state.currentItem your up and down arrow functions would update state.currentItem appropriately, react would re-render the component, react transition group would animate because this.state.currentItem changed.

Comments