为什么关键帧动画在 React 应用程序中渲染滞后？答案

【问题标题】：Why does a keyframes animation lag on render in a react app?为什么关键帧动画在 React 应用程序中渲染滞后？
【发布时间】：2020-07-22 20:11:43
【问题描述】：

这是我的第一个问题！我正在学习反应，并希望实现到登录页面的幻灯片转换。我的期望是让文本在加载时滑动到页面上，但是当我的组件第一次呈现时，转换会产生明显的延迟。（如果重要的话，这发生在 Chrome 版本 83.0.4103.116（官方构建）（64 位）中。

  "react": "^16.13.1"

延迟渲染的初始关键帧：

  .landing {
    font-size: 100%;
    animation: slide-left 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }


   @keyframes slide-left {
     0% {
       transform: translateX(0);
     }
     100% {
       transform: translateX(-100px);
     }
   }

经过研究，我添加了'will-change'的CSS属性来帮助我的加载时间：

.landing {
  font-size: 100%;
  animation: slide-left 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  will-change: transform;
}

这没有帮助，

那是我发现反应转换[https://reactcommunity.org/react-transition-group/transition][1]的时候。我读到 CSS 动画可能会产生滞后，除非使用“变换”或“滑动”属性，这可能是滞后时间的更好解决方案。

带有关键帧的当前组件

import React, { Component } from 'react';
import '../SCSS/Header.scss';


class Header extends Component {
     render(){
       return (
         <divclassName="landing flex row justify-content-center">
           <div className="title row">
             <p>
               Alyssa Hooper
             </p>
           </div>
           <div className="job row">
             <p>
               lifelong learner; aspiring junior developer
             </p>
           </div>
         </div>
    );
  }
}




export default Header;

【问题讨论】：

标签： reactjs css-animations jsx transition

【解决方案1】：

问题已解决。不是关键帧滞后，而是我在关键帧文本上导入的谷歌字体。一个带有 google 字体的预加载脚本被添加到我的 HTML 文档的头部，这解决了这个问题。

【讨论】：