为什么关键帧动画会滞后于 React 应用程序中的渲染？

Question

这是我的第一个问题！我正在学习反应并想实现到登陆页面的幻灯片过渡。我的期望是让文本在加载时滑到页面上，但是当我的组件首次呈现时，转换会产生明显的滞后。（如果重要的话，这发生在 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;
}

这没有帮助，

那是我发现 React Transition [https://reactcommunity.org/react-transition-group/transition][1] 的时候。我读到 CSS 动画可能会产生延迟，除非使用 'transform' 或 'slide' 属性，这可能是延迟时间的更好解决方案。

带有关键帧的当前组件

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;

Answer 1

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

为什么关键帧动画会滞后于 React 应用程序中的渲染？

Why does a keyframes animation lag on render in a react app?

reactjs

css-animations

jsx

transition