javascript - Animations with React JS -

i have few sort filters on page, , want create animation when user click on 1 of them.

if user want sort lowest price, want show new list, animations.

i try react js.

on componentwillmount set state cars :

componentwillmount(){     const cart = this.props.cart;     const listid = this.props.params.id;     const allcars = data.getallcars();     let offers = this.state.offers;      cart.map(car => {         const acar = allcars.find(c => {             return c.id === car.carid;         });         offers[acar.chassis] = car.offer;         this.setstate({offers: offers});     });       //we set state cars in list     const cars = cardata.getcarsincurrentlist(listid, allcars);     this.setstate({cars: cars}); } 

and when user clicks on 1 of sort filters handle on function :

handlesortingfilters(name, event){      event.preventdefault();     const cars = this.state.cars;     const sortfiltervalue = this.state.sortfiltersinit[name];     let filteredcars = "";      if(sortfiltervalue){         //descending order         filteredcars = cars.sort((a, b) => {             if(name === "initialregistration"){                 return date.parse(b[name]) - date.parse(a[name]);             }else{                 return parsefloat(b[name]) - parsefloat(a[name]);             }         });     }else{         //ascending order         filteredcars = cars.sort((a, b) => {             if(name === "initialregistration") {                 return date.parse(a[name]) - date.parse(b[name]);             }else{                 return parsefloat(a[name]) - parsefloat(b[name]);             }          });     }      let sortfiltersinit = this.state.sortfiltersinit;     sortfiltersinit[name] = !this.state.sortfiltersinit[name];      let allfilters = this.state.allfilters;     allfilters[name] = name;      this.setstate({cars: filteredcars, sortfiltersinit: sortfiltersinit, allfilters: allfilters}); } 

thus, update state filtered list of cars. works perfect, apply css animations on list when user clicks on 1 of sort filters.

any ideas or link tutorials?

thanks.

update

the list cars rendered :

<div classname="cars">             <div>                 <reactcsstransitiongroup                 transitionname="example"                 transitionappear={true}                 transitionappeartimeout={500}                 transitionentertimeout={500}                 transitionleavetimeout={500}>                  {cars.map((car, i) => {                     const initialreg = car.initialregistration.slice(0,3) + car.initialregistration.slice(6,10);                     // str.slice(1, 4) extracts second character through fourth character (characters indexed 1, 2, , 3)                      return (                         <div key={i} classname="carbox nopadding">                             <div classname="carboxcontent">                                  <photoandfavorites car={car} language={language} changestaricon={this.changestaricon} addtofavorites={addtofavorites} useremail={currentuseremail} favorites={favorites}/>                                  <div classname="carnameanddesc">                                     <div><link to="" style={{textdecoration: 'none'}}>{car.make}</link></div>                                     <div>{car.desc}</div>                                 </div>                                  <div classname="carprice">                                     <div>{car.price}</div>                                     <div>{car.btw}</div>                                 </div>                                  <div classname="extrafeatures" style={{marginbottom: 5, backgroundcolor: '#eee'}}>                                  </div>                                  <div classname="mainfeatures">                                     <div><img src="../images/portal/user/status/fuel-icon.png" style={{height: 12}}/> <span>{car.fuel}</span></div>                                     <div><img src="../images/portal/user/status/road-icon.png" style={{height: 12}}/> <span>{car.mileage}</span></div>                                     <div><img src="../images/portal/user/status/calendar-icon.png" style={{height: 12}}/> <span>{initialreg}</span></div>                                 </div>                                  <buttons car={car}                                          language={language}                                          changebutton={this.changebutton}                                          addtocard={addtocard}                                          removefromcard={removefromcard}                                          cartcontent={cartcontent}                                          useremail={currentuseremail}                                          handlechange={handleoffers}                                          offers={offers}                                          opacity={this.props.opacity}                                          />                              </div>                         </div>                     );                 })}                 </reactcsstransitiongroup>             </div>             <div classname="clearfix"/>         </div> 

i added css :

 .example-appear {   opacity: 0.01; }  .example-appear.example-appear-active {   opacity: 1;   transition: opacity .5s ease-in; } 

you can use react-addons-css-transition-group

reactcsstransitiongroup based on reacttransitiongroup , easy way perform css transitions , animations when react component enters or leaves dom. it's inspired excellent ng-animate library.

this trigger transition in main layout every time change route

css

.example-enter {   opacity: 0.01;   transition: opacity .5s ease-in; }  .example-enter.example-enter-active {   opacity: 1; }  .example-leave {   opacity: 1;   transition: opacity .5s ease-in; }  .example-leave.example-leave-active {   opacity: 0; } 

js

import react 'react' import reactcsstransitiongroup 'react-addons-css-transition-group'  render() {   return(     <reactcsstransitiongroup       component="ul"       transitionname="example"       transitionentertimeout={500}       transitionleavetimeout={500}>       {this.state.cars.map(car => <li key={car.id}>{car.name}</li>)}     </reactcsstransitiongroup>   ) } 

if need shuffle animation try react-shuffle - animated shuffling of child components

import react, {component} 'react'; import shuffle 'react-shuffle';  class app extends component {   render() {     return (       <shuffle>         {// method render children goes here}       </shuffle>     )   } }