Aos: soft refresh webpage, all animations are gone.

[LastStranger]

This is:

• Bug

Specifications

• AOS version:^2.3.4
• OS:win10
• Browser:chrome(recently updated, I don't know the version)

Expected Behavior

when I click the refresh button on the chrome tab bar, it should be the same.

Actual Behavior

animations dissappear,

Steps to Reproduce the Problem

1.
2.
3.

Detailed Description

I'm using react hooks, here is my code, and if I use just html file, it doesn't have this kind of problem.

import React, {useEffect, useLayoutEffect} from 'react';
// import "../assets/component_one.less";
// import css from "../assets/component_one.less";
import css from '../assets/component_one_css.css';
// import "../assets/component_one_css.css";
import _ from "lodash";
import one from "../assets/images/1.jpg";
import two from "../assets/images/2.jpg";
import three from "../assets/images/3.jpg";
import four from "../assets/images/4.jpg";
import five from "../assets/images/5.jpg";
// import { add } from 'lodash/fp';
import AOS from 'aos';
import 'aos/dist/aos.css';

const ComponentOne = () => {
    // const addOne = add(1);
    // const arr = [1,2,3,4,5];
    // const res = _.map(arr, (each) => {return each * each});
    // console.log(res);
    // return (
    //     <div className={css.component_one_css}>
    //         this is component one
    //     </div>
    // );
    // useLayoutEffect(() => {
    //     AOS.init();
    // }, []);
    useEffect(() => {
        AOS.init();
    }, []);
    return (
            <div className={css.component_one_css}>
                this is component one,
                {/*<div data-aos="fade-in"><img src={one} alt=""/></div>*/}
                <div data-aos="fade-in"><img src={two} alt=""/></div>
                <div data-aos="fade-in"><img src={three} alt=""/></div>
                <div data-aos="fade-in"><img src={four} alt=""/></div>
                <div data-aos="fade-in"><img src={five} alt=""/></div>
                <div data-aos="fade-in"><img src={three} alt=""/></div>
                <div data-aos="fade-in"><img src={four} alt=""/></div>
                <div data-aos="fade-in"><img src={five} alt=""/></div>
            </div>
    )
};
{/*<div className={css["component-one"]}>*/}
    {/*this is component one*/}
{/*</div>*/}

export default ComponentOne;

Possible Solution

[LastStranger]

I sovled it by adding window.addEventListener('load', AOS.refresh); down below the AOS.init(); but I don't why, what caused this kind of problem?