我的页面上有一些排序过滤器，我想在用户点击其中一个时创建动画。
如果用户想要按最低价格排序，我想显示新列表，但有一些动画。
我尝试使用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;
}
答案 0 :(得分：1)
您可以使用react-addons-css-transition-group
ReactTransitionGroup基于.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; }，是一个 在React中执行CSS过渡和动画的简便方法 组件进入或离开DOM。它受到了优秀的启发 ng-animate图书馆。
每次更改路线时，这将触发主布局的转换
<强> CSS
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
import React, {Component} from 'react';
import Shuffle from 'react-shuffle';
class App extends Component {
render() {
return (
<Shuffle>
{// Method to render children goes here}
</Shuffle>
)
}
}
如果您需要随机动画，请尝试react-shuffle - 动画改组子组件
if (IsPost) {
var value = Request.Form["value"];
var Student_Reg_No = Request.Form["Student_Reg_No"];
var Student_Name = Request.Form["Student_Name"];
var Father_Name = Request.Form["Father_Name"];
var Temporary_Address = Request.Form["Temporary_Address"];
var Permanent_Address = Request.Form["Permanent_Address"];
var Phone_No = Request.Form["Phone_No"];
var Blood_Group = Request.Form["Blood_Group"];
var Email_Address = Request.Form["Email_Address"];
if (Validation.IsValid()){
try{
var db = Database.Open("site_data");
var updateCommand = "Update site_data_table set Student_Reg_No =@0, Student_Name=@1, Father_Name=@2, Temporary_Address=@3,Permanent_Address=@4, Phone_No=@5, Blood_Group=@6, Email_Address=@7 where Id=@8)";
db.Execute(updateCommand, Student_Reg_No, Student_Name, Father_Name, Temporary_Address, Permanent_Address, Phone_No, Blood_Group, Email_Address, value);
Response.Redirect("~/edit?id=success");
}
catch{
<textarea>Data is Not updated</textarea>
}
}
}