React CSStransition or React-spring in map()

Question

Can someone explain how to make smooth transition like opacity 0 - opacity 1 with CSStransiton or react-spring animation, when data comes from server and i'm doing map div instantly appears without transition.

i want to make transition on form submit, when im returning data from map(), could someone show me how to add this transition with CSStransition or 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

just needed to add another prop with value true appear={true} and classNames for it.

<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;
}

Thanks to user "wherewereat" from reddit.