NextJS中的CSS动画关键帧不起作用答案

【问题标题】：CSS Animation keyframe in NextJS not workingNextJS中的CSS动画关键帧不起作用
【发布时间】：2021-10-20 15:01:44
【问题描述】：

我目前在 NextJS 中有一个非常简单的组件，它正在回显 HI。该组件在加载时淡入，我正在尝试将道具传递给它，以使其淡出。听起来很简单，除了 fadeOut 似乎没有执行，即使 className 呈现在页面上，尽管是以转译的形式。我看不出我做错了什么。

import styles from '../../styles/Hi.module.css'
import {useEffect, useState} from 'react';

const Hi = ({children, extraClass, navigateAway}) => {

    const [className, setClassName] = useState(styles.hi);

    useEffect(()=>{
        if(navigateAway === true ) {
           setClassName(styles.hiOut)
        }
    },[navigateAway]);

    return (
        <span onAnimationEnd={()=>setClassName(styles.hi + ' ' + styles.done)} className={className}>{children}</span>
    );
};

export default Hi;

风格：

.hi {
    display:inline-block;
    animation-iteration-count: 1;
    animation-delay: .1s;
    animation: fadein 1s;
    opacity: 0;
}

.hiOut {
    display:inline-block;
    animation-delay: .1s;
    animation: fadeOut 3s;
    border:1px solid red;
}



@keyframes fadein {
    from { opacity: 0;  }
    to   { opacity: 1; }
}

@keyframes fadeout {
    0% { opacity: 0;}
    100%   { opacity: 1; }
}

对于它的价值：通过页面上的检查器，该类在检查它时呈现它，红色边框 1px 实体显示，我的动画，不是那么多。

.Hi_hiOut__3g-I4 {
    display: inline-block;
    -webkit-animation-delay: .1s;
    -moz-animation-delay: .1s;
    animation-delay: .1s;
    -webkit-animation: Hi_fadeOut__265f3 3s;
    -moz-animation: Hi_fadeOut__265f3 3s;
    animation: Hi_fadeOut__265f3 3s;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay: .1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: Hi_fadeOut__265f3;
    border: 1px solid red;
}

【问题讨论】：

标签： css next.js css-animations

【解决方案1】：

天哪。现在杀了我。

动画：淡出 3s；

fadeout not fadeOut

【讨论】：