React <Suspense>后备加载器动画

问题描述

我想在显示内容之前使加载程序CSS动画完成animation-duration: 0.5s，但是<Suspense fallback={}>仅在获取文件时显示加载程序。如何使加载器CSS动画完成？

./App.jsx

import React,{ Suspense } from 'react';
import Preloader from './views/Preloader';

export default () => {
    return <Suspense fallback={<Preloader />}></Suspense>;
};

./views/Preloader.jsx

import React from 'react';
import logo from '../assets/img/logo.svg';
import '../assets/styles/preloader.scss';

export default () => (
    <div className="preloader">
        <img src={logo} alt="logo" />
    </div>
);

./assets/styles/preloader.scss

div.preloader {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: disappear;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;

    img {
        width: 8em;
        animation: grayscaleAndScale;
        animation-duration: 0.5s;
    }
}

@keyframes grayscaleAndScale {
    0% {
        filter: grayscale(1);
        transform: scale(0.8);
    }

    50% {
        transform: scale(1);
    }

    100% {
        filter: grayscale(0);
        transform: scale(1.5);
    }
}

@keyframes disappear {
    50% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）