伪样式组件 h2 未在 html 中显示

Question

我目前正在尝试使用伪 ::before 和 after 在 H2 上创建动画。但是 ::before 和 ::after 没有显示在我的 HTML 中。 我在这里做错了什么？查看样式化的组件文档，这应该可以工作。我知道奇怪的动画功能。但这对前后没有任何影响。我已经完全删除了它，但它仍然没有渲染。

import React from 'react'
import styled, { keyframes, css } from 'styled-components'
import PropTypes from 'prop-types'

const Wrapper = styled.h2`
  position: relative;
  font-size: 1.5rem;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  transform: scale3d(1,1,1);
  opacity: 1;
  &::before, &::after{
    content: ${(props) => props.text};
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background: #333333;
    color: #ffffff;
    clip: rect(0, 900px, 0, 0);
  }

  &::before {
    left: 7px;
    text-shadow: 1px 0 green;
    animation: ${glitchEffect} 3s infinite linear alternate-reverse;
  }

  &::after {
    left: 3px;
    text-shadow: -1px 0 red;
    animation: ${glitchEffect} 2s infinite linear alternate-reverse;
  }
`

const glitchEffect = keyframes`
  ${setInterval(createAnimation, 200)}
`

function createAnimation(){
  const single = `clip: rect(${(Math.floor(Math.random() * 100 + 1))}px, 9999px, ${(Math.floor(Math.random() * 100 + 1))}px, 0);`
  return css`${single}`
}
export default function Glitch({ text }){
  return (
    <Wrapper text={text}>{text}</Wrapper>
  )
}

Glitch.propTypes = {
  text: PropTypes.string.isRequired
}

Answer 1

一些事情：

content: ${(props) => props.text}; 不起作用，您需要在文本周围添加双引号，例如 content: "${(props) => props.text}";

第二期是setInterval(createAnimation, 200)。这将返回一个整数（您刚刚创建的间隔的句柄）。例如，一旦您完成动画，就需要这样做来清除间隔。

如果你想做的是生成一些关键帧，那么你需要像这样手动调用createAnimation

import React from "react";
import styled, { keyframes, css } from "styled-components";

const glitchEffect = keyframes`
  from {
    ${createAnimation()}
  }
  to {
    ${createAnimation()}
  }
`;

const Wrapper = styled.h2`
  position: relative;
  font-size: 1.5rem;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  transform: scale3d(1, 1, 1);
  opacity: 1;
  > .before,
  > .after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background: #333333;
    color: #ffffff;
    clip: rect(0, 900px, 0, 0);
  }

  > .before {
    left: 7px;
    text-shadow: 1px 0 green;
    animation: ${glitchEffect} 3s infinite linear alternate-reverse;
  }

  > .after {
    left: 3px;
    text-shadow: -1px 0 red;
    animation: ${glitchEffect} 2s infinite linear alternate-reverse;
  }
`;

function createAnimation() {
  const single = `clip: rect(${Math.floor(
    Math.random() * 100 + 1
  )}px, 9999px, ${Math.floor(Math.random() * 100 + 1)}px, 0);`;
  return css`
    ${single}
  `;
}

export default function Glitch({ text }) {
  return (
    <Wrapper>
      <div className="before">{text}</div>
      {text}
      <div className="after">{text}</div>
    </Wrapper>
  );
}

如果要生成随机动画，则需要从 Glitch 中创建间隔

// First transform your "animation: ${glitchEffect} 3s infinite linear alternate-reverse;"
// into a "transition: text-shadow 500ms linear;"
// Since we're manually changing its value
import React, { useState, useEffect } from "react";
import styled from "styled-components";
import PropTypes from "prop-types";

const Wrapper = styled.h2`
  position: relative;
  font-size: 1.5rem;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  transform: scale3d(1, 1, 1);
  opacity: 1;
  > .before,
  > .after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background: #333333;
    color: #ffffff;
  }

  > .before {
    left: 7px;
    text-shadow: 1px 0 green;
    transition: clip 300ms linear;
  }

  > .after {
    left: 3px;
    text-shadow: -1px 0 red;
    transition: clip 200ms linear;
  }
`;

function createAnimation() {
  return {
    clip: `rect(${Math.floor(Math.random() * 100 + 1)}px, 9999px, ${Math.floor(
      Math.random() * 100 + 1
    )}px, 0)`
  };
}

export default function Glitch({ text }) {
  const [glitchEffect, setGlitchEffect] = useState(createAnimation());
  useEffect(() => {
    const interval = setInterval(() => setGlitchEffect(createAnimation()), 500);
    return () => {
      clearInterval(interval);
    };
  }, []);
  // now pass glitchEffect to a "style" prop to your pseudo elements
  // See https://stackoverflow.com/a/28269950/3877913
  return (
    <Wrapper>
      <div className="before" style={glitchEffect}>
        {text}
      </div>
      {text}
      <div className="after" style={glitchEffect}>
        {text}
      </div>
    </Wrapper>
  );
}