时间戳

首页 > 解决方案 > React 如何在本地指定动画@keyframes 和类

reactjs - React 如何在本地指定动画@keyframes 和类

问题描述

function Loader() {
    var style = {
        border: '16px solid #eee',
        borderTop: '16px solid #3ae',
        borderRadius: '50%',
        width: '1cm',
        height: '1cm',
        animation: 'spin 2s linear infinite',
    }
    return (
        <div style={style}>
        <style>{`
            @keyframes spin {
                 0% { transform: rotate(0deg); }
                 100% { transform: rotate(360deg); }
            }
        `}</style>
        </div>
    )
}

有没有办法@keyframes在不使用内联字符串的情况下本地指定组件（本示例中的组件函数）？

此外，如果您<style>在组件渲染函数中指定，如果有多个相同类的对象（或使用相同的对象），它是否会降低性能@keyframes？

想法是将内容保存<style>在组件的本地内部，我不想将其移动到.css文件中，但同时我不想要数百个重复的类/关键帧定义，而实际上只有一个就足够了。

标签： reactjs

解决方案

如果不编写辅助函数或使用一些可以注入关键帧的标准库，这是不可能的，因为用于此的浏览器选项仍处于试验阶段且未得到广泛支持，例如动画函数。

https://developer.mozilla.org/en-US/docs/Web/API/Element/animate

当使用 CSS 模块从另一个文件（例如 css 或 JS 文件）导入它们时，Webpack 通常会为您完成注入繁重的工作。

我建议您要么导入 CSS 文件，要么为此检查样式化组件辅助函数。

import React from "react";
import ReactDOM from "react-dom";
import { keyframes } from "styled-components";

function Loader() {
  var spin = keyframes`
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
`;

  var styles = {
    border: "16px solid #eee",
    borderTop: "16px solid #3ae",
    borderRadius: "50%",
    width: "1cm",
    height: "1cm",
    animation: `${spin} 2s linear infinite`
  };

  return <div style={styles} />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Loader />, rootElement);

推荐阅读