Html 带有内联 CSS 问题的 React 中的 Apple 动画

您可以try 使用styled-components来保持组件更加灵活和兼容.我用styled-components复制了codepen示例，并使其易于扩展.

因此，TopAnimateBlock和BottomAnimateBlock有numOfLine个属性，因此块内有多少行.BottomAnimateBlock中的第二个属性是delayTopLine，它应该与TopAnimateBlock中的numOfLine具有相同的数字，因为我们需要等待顶线播放.

此外，您可以在TextStyle中使用color属性轻松更改文本 colored颜色 ，并将其传递为 colored颜色 值、HEX colored颜色 或rgba()/hsla().

文本动画.tsx公司

import styled, { keyframes } from 'styled-components';

const showTopText = keyframes`
  0% { transform: translate3d(0, 100% , 0); }
  40%, 60% { transform: translate3d(0, 50%, 0); }
  100% { transform: translate3d(0, 0, 0); }
`;
const showBottomText = keyframes`
  0% { transform: translate3d(0, -100%, 0); }
  100% { transform: translate3d(0, 0, 0); }
`;

const Section = styled.section`
  width: calc(100% + 10vmin);
  display: flex;
  flex-flow: column;
  padding: 2vmin 0;
  overflow: hidden;
  &:last-child {
    border-top: 1vmin solid white;
  }
`;

const Block = styled.div<{ numOfLine: number }>`
  position: relative;
`;
const TopAnimateBlock = styled(Block)`
  animation: ${showTopText} calc(0.5s * ${props => props.numOfLine}) forwards;
  animation-delay: 0.5s;
  transform: translateY(calc(100% * ${props => props.numOfLine}));
`;
const BottomAnimateBlock = styled(Block)<{ delayTopLine: number }>`
  animation: ${showBottomText} calc(0.5s * ${props => props.numOfLine}) forwards;
  animation-delay: calc(0.7s * ${props => props.delayTopLine});
  transform: translateY(calc(-100% * ${props => props.numOfLine}));
`;

const TextStyle = styled.p<{ color: string }>`
  font-family: Roboto, Arial, sans-serif;
  font-size: 12vmin;
  color: ${props => props.color};
`;

export const TextAnimation = () => {
  return (
    <>
      <Section>
        <TopAnimateBlock numOfLine={2}>
          <TextStyle color="grey">mimicking</TextStyle>
          <TextStyle color="white">apple's design</TextStyle>
        </TopAnimateBlock>
      </Section>
      <Section>
        <BottomAnimateBlock numOfLine={1} delayTopLine={2}>
          <TextStyle color="white">for the win!</TextStyle>
        </BottomAnimateBlock>
      </Section>
    </>
  );
};

If we want to animate 3 lines instead of 2, just add / change:

1. 添加新的TextStyle组件
2. 从2更改为3 TopAnimateBlock中的numOfLine和BottomAnimateBlock中的delayTopLine
3. 并将关键帧替换到此片段:

const showTopText = keyframes`
  0% { transform: translate3d(0, 100% , 0); }
  25%, 40% { transform: translate3d(0, 66%, 0); }
  60%, 75% { transform: translate3d(0, 33%, 0); }
  100% { transform: translate3d(0, 0, 0); }
`;