使用 React JS 制作动画

Posted 2023-03-06

【中文标题】使用 React JS 制作动画

【英文标题】：Animations with React JS

【发布时间】：2017-01-05 04:55:14

【问题描述】：

我的页面上有一些排序过滤器，我想在用户单击其中一个时创建动画。

如果用户想按最低价格排序，我想显示新列表，但带有一些动画。

我尝试用 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;

【参考方案1】：

你可以使用react-addons-css-transition-group

ReactCSSTransitionGroup 基于ReactTransitionGroup 并且是 在 React 中执行 CSS 过渡和动画的简单方法 组件进入或离开 DOM。它的灵感来自于优秀 ng-animate 库。

这将在您每次更改路线时触发主布局中的转换

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>
    )
  

【讨论】：

我已经添加了你所说的，但它不起作用。查看更新后的问题。

如果您希望在初始调用时也有动画，您需要添加 'transitionAppear=true' 属性！您的示例不起作用，因为您同时呈现过渡组和内容。

忘记了：您还需要 transitionAppearTimeout=500 更多信息：facebook.github.io/react/docs/…

它适用于页面加载。但是如果我单击其中一个过滤器，我希望我的列表顺序被打乱。现在，如果我单击过滤器，则没有动画。

成功了。诀窍是唯一真正的要求是每个孩子都有一个不基于索引的键，以便正确识别位置。