我的页面上有几个排序过滤器,我想在用户单击其中一个时创建动画。
如果用户想按最低价格排序,我想显示新列表,但有一些动画。
我尝试用 React JS 来做。
在 componentWillMount 上,我设置了所有汽车的状态:
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 with all cars in this list
const cars = carData.getCarsInCurrentList(listID, allCars);
this.setState({cars: cars});
}
然后当用户点击其中一个排序过滤器时,我会在此函数上处理它:
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});
}
因此,我使用过滤后的汽车列表更新状态。一切都很完美,但我还想在用户单击其中一个排序过滤器时在列表上应用一些 css 动画。
任何想法或一些好的教程的链接?
谢谢。
更新
渲染汽车的列表:
<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 the second character through the fourth character (characters indexed 1, 2, and 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>
我还添加了这个 css:
.example-appear {
opacity: 0.01;
}
.example-appear.example-appear-active {
opacity: 1;
transition: opacity .5s ease-in;
}
最佳答案
您可以使用 react-addons-css-transition-group
ReactCSSTransitionGroup
is based onReactTransitionGroup
and is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. It's inspired by the excellent ng-animate library.
这将在您每次更改路线时触发主布局中的转换
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 from 'react'
import ReactCSSTransitionGroup from '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>
)
}
如果您需要随机播放动画,请尝试 react-shuffle - 子组件的动画洗牌
import React, {Component} from 'react';
import Shuffle from 'react-shuffle';
class App extends Component {
render() {
return (
<Shuffle>
{// Method to render children goes here}
</Shuffle>
)
}
}
关于javascript - 使用 React JS 的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39201511/