Javascript 使用React JS的动画
我的页面上有一些排序过滤器,我想在用户单击其中一个过滤器时创建动画 如果用户想按最低价格排序,我想显示新的列表,但需要一些动画 我试着用JS做这件事 在组件Willmount上,我设置了所有车辆的状态:Javascript 使用React JS的动画,javascript,css,animation,reactjs,Javascript,Css,Animation,Reactjs,我的页面上有一些排序过滤器,我想在用户单击其中一个过滤器时创建动画 如果用户想按最低价格排序,我想显示新的列表,但需要一些动画 我试着用JS做这件事 在组件Willmount上,我设置了所有车辆的状态: componentWillMount(){ const cart = this.props.cart; const listID = this.props.params.id; const allCars = data.getAllCars(); let offe
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>
你可以用
ReactCSTranslationGroup
基于ReactTranslationGroup
,是一个
简单的方式来执行CSS转换和动画时,一个反应
组件进入或离开DOM。它的灵感来自于优秀的
ng动画库
这将在每次更改路线时触发主布局中的转换
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;
}
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>
)
}
js
.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;
}
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”导入React
从“react addons css转换组”导入ReactCSTranslationGroup
render(){
返回(
{this.state.cars.map(car=>{car.name} )}
)
}
如果需要随机播放动画,请尝试子组件的动画随机播放
import React, {Component} from 'react';
import Shuffle from 'react-shuffle';
class App extends Component {
render() {
return (
<Shuffle>
{// Method to render children goes here}
</Shuffle>
)
}
}
import React,{Component}来自'React';
从“反应洗牌”导入洗牌;
类应用程序扩展组件{
render(){
返回(
{//呈现子对象的方法在此处运行}
)
}
}
我已经添加了您所说的内容,但它不起作用。请参阅更新的问题。如果您希望在初始调用中也显示动画,则需要添加“transitionAppear={true}”属性!您的示例不起作用,因为您同时呈现转换组和内容。忘记:您还需要transitionAppearTimeout={500}详细信息:它在页面加载时起作用。但如果我点击其中一个过滤器,我希望我的列表顺序会被打乱。现在,如果我点击过滤器,就没有动画了。它成功了。诀窍是唯一真正的要求是每个孩子都有一个非索引键,用于正确的位置识别。