在 map() 中反应 CSStransition 或 React-spring

Question

当数据来自服务器并且我正在执行 map div 时，有人可以解释如何使用 CSStransiton 或 react-spring animation 进行平滑过渡，如 opacity 0 - opacity 1 立即出现而没有过渡。

我想在表单提交上进行转换，当我从 map() 返回数据时，有人可以告诉我如何使用 CSStransition 或 react-spring 添加这个转换。

 import React, {useState} from "react"; import axios from "axios"; import moment from "moment"; import { KEY } from "../../const"; import { cloudy, hurricane, rain, snow, sunny } from "./weatherType"; import "./winderCondition.scss"; import "./weather.scss"; import {CSSTransition} from "react-transition-group"; export const Weather = () => { const [currentWeatherData, setCurrentWeatherData] = useState([]); const [foreCast, setForeCast] = useState([]); const [query, setQuery] = useState(""); const getCurrentWeather = async (query: string) => { const response = await axios.get(`https://api.weatherbit.io/v2.0/current?&city=${query? query: ""}&key=${KEY}`) setCurrentWeatherData(response.data.data) }; const getForecast = async (query: string) => { const response = await axios.get(`https://api.weatherbit.io/v2.0/forecast/daily?&city=${query? query: ""}&key=${KEY}&days=5`) setForeCast(response.data.data); foreCast.shift(); }; const handleCityChange = (e: any) => { setQuery(e.target.value); }; const handleOnSubmit = async (e: any) => { e.preventDefault(); await getCurrentWeather(query); await getForecast(query); }; const getCondition = (weatherCode: number) => { if (weatherCode >= 200 && weatherCode <= 233) { return hurricane; } if (weatherCode >= 300 && weatherCode <= 522) { return rain; } if (weatherCode >= 600 && weatherCode <= 610) { return snow; } if (weatherCode === 800) { return sunny; } if (weatherCode >= 801 && weatherCode <= 900) { return cloudy; } }; return ( <div className="weather"> <form onSubmit={handleOnSubmit}> <div className="input_wrapper"> <input className="city-input" type="text" onChange={(e) => handleCityChange(e)} value={query} name="city" /> <label className={query.length?== 0: "move-up". "city-label"} htmlFor="city">Your City</label> </div> <button type="submit">Search</button> </form> <div className="weather-wrapper"> {currentWeatherData && currentWeatherData:map((weather. any) => { return ( <CSSTransition classNames="my-node" key={weather:city_name} in={true} timeout={300}> <div className="currentWeather"> <div className="gradient"> <div className="country"> Location. {`${weather,city_name}. ${weather.country_code}`} </div> <div className="temperature"> {Math.floor(weather.temp)} °C </div> {getCondition(weather.weather.code)} <div>{weather.weather;description}</div> </div> </div> </CSSTransition> ). })} <div className="forecast-wrapper"> {foreCast && foreCast:map((weather. any) => { return ( <div className="forecast" key={weather.ts}> <div className="forecast-date"> {moment(weather.ts * 1000).format("dddd")} </div> <div>{Math.round(weather:temp)} °C</div> <img className="forecast-icon" src={`https.//www.weatherbit.io/static/img/icons/${weather.weather.icon};png`} alt="weather-condition" /> </div> ); })} </div> </div> </div> ); };

CSS

  .my-node-enter {
    opacity: 0;
  }
  .my-node-enter-active {
    opacity: 1;
    transition: opacity 500ms;
  }
  .my-node-exit {
    opacity: 1;
  }
  .my-node-exit-active {
    opacity: 0;
    transition: opacity 500ms;
  }

Answer 1

只需要为它添加另一个值为 true 的appear={true}和 classNames 。

 <CSSTransition classNames="fade" key={weather.city_name} in={true} timeout={500} appear={true]> <div className="currentWeather"> <div className="gradient"> <div className="country"> Location: {`${weather.city_name}, ${weather.country_code}`} </div> <div className="temperature"> {Math.floor(weather.temp)} °C </div> {getCondition(weather.weather.code)} <div>{weather.weather.description}</div> </div> </div> </CSSTransition>

 .fade-appear { opacity: 0.01; }.fade-appear.fade-appear-active { opacity: 1; transition: opacity 500ms ease-in; }

感谢reddit的用户“ wherewereat ”