Isu animasi Apple menggunakan React dan CSS sebaris

Question

Saya cuba mencipta semula animasi ini dalam React menggunakan HTML dan CSS, menggunakan gaya sebaris dan TypeScript. Saya sedang mencipta objek dengan maklumat gaya dan merujuknya dalam atribut gaya. Di bawah ialah kod. Ia tidak berfungsi, saya tidak pasti apa yang saya lakukan salah, saya mengesyaki gaya tidak ditakrifkan dan dirujuk dengan betul?

Ini adalah contoh Codepen asal yang saya cuba tulis semula: Animasi Apple

Ini kod saya

import React from 'react';

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

    animatedTitle: {
        color: '#222',
        fontFamily: 'Roboto, Arial, sans-serif',
        height: '90vmin',
        left: '50%',
        top: '50%',
        transform: 'translate(-50%, -50%)',
        width: '90vmin',
    },
    'animatedTitle > div': {
        height: '50%',
        overflow: 'hidden',
        position: 'absolute',
        width: '100%',
    },
    'animatedTitle > div div': {
        fontSize: '12vmin',
        padding: '2vmin 0',
        position: 'absolute',
    },
    'animatedTitle > div div span': {
        display: 'block',
    },
    'animated-title > div.text-top': {
        borderBottom: '1vmin solid #000',
        top: 0,
    },
    'animatedTitle > div.text-top div': {
        animation: 'showTopText 1s',
        animationDelay: '0.5s',
        animationFillMode: 'forwards',
        bottom: 0,
        transform: 'translate(0, 100%)',
    },
    'animatedTitle > div.text-top div span:first-child': {
        color: '#767676',
    },
    'animatedTitle > div.text-bottom': {
        bottom: 0,
    },
    'animatedTitle > div.text-bottom div': {
        animation: 'showBottomText 0.5s',
        animationDelay: '1.75s',
        animationFillMode: 'forwards',
        top: 0,
        transform: 'translate(0, -100%)',
    },
};

function Design() {
    return (
        <div style={styles.animatedTitle}>
            <div style={styles['animatedTitle > div.text-top div']}>
                <div>
                    <span>mimicking</span>
                    <span>apple's design</span>
                </div>
            </div>
            <div style={styles['animatedTitle > div.text-bottom']}>
                <div>for the win!</div>
            </div>
        </div>
    );
}

export { Design };

Answer 1

Anda boleh cuba menggunakan styled-components 来使您的组件更灵活和兼容。我使用 styled-components yang mereplikasi contoh codepen dan menjadikannya mudah untuk dilanjutkan.

Oleh itu, kedua-dua TopAnimateBlock dan BottomAnimateBlock kedua-duanya mempunyai atribut TopAnimateBlock 和 BottomAnimateBlock 都有 numOfLine 属性，表示块内有多少行。在 BottomAnimateBlock 中的第二个属性是 delayTopLine，它应该与 TopAnimateBlocknumOfLine, yang menunjukkan bilangan baris di dalam blok. Sifat kedua dalam BottomAnimateBlock ialah delayTopLine

, yang sepatutnya bilangan

numOfLineTextStyle yang sama dalam TopAnimateBlock memandangkan kita perlu menunggu baris atas untuk dimainkan. Selain itu, anda boleh menukar warna teks dengan mudah melalui atribut color dan lulus nilai warna, HEX warna atau rgba()

/

hsla()

.

TextAnimation.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. Jika kita ingin menghidupkan 3 baris dan bukannya 2, cuma tambah/tukar: TextStyle
2. Tambah TopAnimateBlock 中将 numOfLine 从2更改为3，在 BottomAnimateBlock komponen baharu Menukar
numOfLine
3. daripada 2 kepada 3 dalam TopAnimateBlock dan
delayTopLine

daripada 2 kepada 3🎜 dalam BottomAnimateBlock 🎜Dan gantikan kerangka utama dengan klip berikut: 🎜 🎜

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