我们可以将 CSS 关键帧动画限制在一个范围内吗

Question

我想知道是否可以将关键帧动画限制在基于类名的范围内。好处是能够多次使用相同的动画名称而不会出现问题。我找不到任何关于它的信息..

如果不可能： 是否有处理命名冲突的最佳实践？

Answer 1

我曾经使用 SCSS 之类的东西来为我的关键帧生成自动创建的名称。它们可能没有描述性，但它们确保了唯一性。比如：

$animation-id-count: 0 !global;

@function animation-id {

  $animation-id-count: $animation-id-count + 1;
  @return animation-id-#{$animation-id-count};

}

在此之后，只需像这样在代码中使用该函数：

.class {

  $id: animation-id();

  @keyframes #{$id}{
    ...keyframes
  }

  animation: $id 1s infinite;

}

这样，如果您将它插入到 SCSS 中的任何其他位置或移动它，它仍然会匹配正确的动画，并且它会阻止命名空间以任何方式重叠。

Answer 2

这是一种 JSX 方法（为此您需要 object-hash）。

以下示例展示了如何根据transform: scale(n) 定义具有各自唯一ID 的不同动画。为此，定义一个返回关键帧及其 ID 的函数。关键帧 ID 是一个自定义字符串，后缀为函数选项的哈希值（例如比例因子）。

（注意 CSS 自定义标识符，例如，不要在您的 ID 中包含 .。请参阅 MDN: < custom-ident >。）

import hash from "object-hash";

const keyFramesScale = (options = {}) => {

    let { transforms, id, scale } = options;
    transforms = transforms || "";
    scale = scale || 1.25;

    const keyFramesId = `scale${id ? "-" + id : ""}-${hash(options).substring(0, 6)}`;
    const keyFrames = {
        [`@keyframes ${keyFramesId}`]: {
            "100%": {
                transform: `scale(${scale}) ${transforms}`,
            },
            "0%": {
                transform: `scale(1) ${transforms}`,
            }
        }
    };

    return [keyFramesId, keyFrames];
};

使用方法：

const [scaleUpId, keyFramesScaleUp] = keyFramesScale({ scale: 1.25, transforms: "rotate(-30deg)", id: "up" });
const [scaleDownId, keyFramesScaleDown] = keyFramesScale({ scale: 0.75, transforms: "rotate(-30deg)", id: "down" });

// scaleUpId = "scale-up-c61254"
// scaleDownId = "scale-down-6194d5"
// ...

<tag style={{
    ...keyFramesScaleUp,
    ...keyFramesScaleDown,
    ...(!hasTouchScreen && isActive && !isClicked && {
        animation: `${scaleUpId} 0.5s infinite alternate linear`,
        "&:hover": {
            animation: "none",
        },
    }),
    ...(isClicked && {
        animation: `${scaleDownId} .25s 1 linear`,
    }),
}} />

当然，您可以编写一个更通用的函数，对整个关键帧进行哈希处理，并据此为其分配一个 ID。

编辑

为了具体化已经说过的话，这里是通用方法。我们首先定义一个通用函数，它接受动画名称（例如scale、pulse 等）、关键帧（可以是对象或函数）以及可选的关键帧参数及其默认值。

import hash from "object-hash";

const createKeyFramesId = (id, keyFrames) => {
    return `${id}-${hash(keyFrames).substring(0, 6)}`;
};

const genericKeyFrames = (name, keyFrames, defaults = {}, options = {}) => {

    if (typeof keyFrames === "function") {
        // The order of defaults & options is important: the latter overrides the former.
        keyFrames = keyFrames({ ...defaults, ...options });
    }

    const keyFramesId = createKeyFramesId(name, keyFrames);
    const keyFramesObject = {
        [`@keyframes ${keyFramesId}`]: keyFrames
    };
    return [keyFramesId, keyFramesObject];
};

从现在开始，我们可以定义各种动画。用法同上。

export const keyFramesPulse = () =>
    genericKeyFrames("pulse", {
        "100%": {
            opacity: "1",
        },
        "0%": {
            opacity: "0.5",
        },
    });

export const keyFramesRotate = (options = {}) => {
    const defaults = {
        rotate: 360,
        transforms: "",
    };

    const rotateKeyFrames = ({ rotate, transforms }) => {
        return {
            "100%": {
                transform: `rotate(${rotate}deg) ${transforms}`,
            }
        }
    };

    return genericKeyFrames(`rotate`, rotateKeyFrames, defaults, options);
};

export const keyFramesScale = (options = {}) => {

    const defaults = {
        scale: 1.25,
        transforms: ""
    };

    const scaleKeyFrames = ({ scale, transforms }) => {
        return {
            "100%": {
                transform: `scale(${scale}) ${transforms}`,
            },
            "0%": {
                transform: `scale(1) ${transforms}`,
            }
        }
    };

    return genericKeyFrames(`scale`, scaleKeyFrames, defaults, options);
};

它在 DevTools 中的样子：