国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Vous pouvez essayer d'utiliser styled-components 來使您的組件更靈活和兼容。我使用 styled-components qui reproduit l'exemple codepen et facilite son extension.

Par conséquent, TopAnimateBlock et BottomAnimateBlock ont tous deux l'attribut TopAnimateBlock 和 BottomAnimateBlock 都有 numOfLine 屬性，表示塊內(nèi)有多少行。在 BottomAnimateBlock 中的第二個(gè)屬性是 delayTopLine，它應(yīng)該與 TopAnimateBlocknumOfLine, qui indique le nombre de lignes à l'intérieur du bloc. La deuxième propriété de BottomAnimateBlock est delayTopLine

numOfLineTextStyle dans TopAnimateBlock car nous devons attendre que la rangée du haut soit jouée. De plus, vous pouvez facilement changer la couleur du texte via l'attribut color de et transmettre la valeur de couleur, HEX color ou rgba()

hsla()

TexteAnimation.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>
    </>
  );
};

1. Si nous voulons animer 3 lignes au lieu de 2, il suffit d'ajouter/modifier?: TextStyle
2. Ajouter un nouveau TopAnimateBlock 中將 numOfLine 從2更改為3，在 BottomAnimateBlockcomposant Changement de
numOfLine
3. de 2 à 3 dans TopAnimateBlock et
delayTopLine

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); }
`;