LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
#example div div{
  padding:10px;
  background: blue;
  display:block;
  width:100px;
  margin:5px;
  color: white;
}

.example-enter {
  opacity: 0.01;
  transition: opacity 1s ease-in;
}

.example-enter.example-enter-active {
  opacity: 1;
}

.example-leave {
  opacity: 1;
  transition: opacity 1s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0.01;
}
JS
/**@jsx React.DOM*/

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
  
var TodoList = React.createClass({
    getInitialState: function() {
      return {items: ['hello', 'world', 'click', 'me']};
    },
    handleAdd: function() {
      var newItems =
      this.state.items.concat([prompt('Enter some text')]);
      this.setState({items: newItems});
    },
    handleRemove: function(i) {
      var newItems = this.state.items;
      newItems.splice(i, 1);
      this.setState({items: newItems});
    },
    render: function() {

      var items = this.state.items.map(function(item, i) {
        return (
          
{item}
); }.bind(this)); return (
{items}
); } }); React.render(, document.getElementById('example'));
Host Instantly Drag and Drop Website Builder

 

Description

An example of React.js ReactCSSTransitionGroup addon component taken from the React.js documentation
Term
Mon, 11/27/2017 - 22:10

Related Codes

Pen ID
Pen ID
Pen ID