React 및 인라인 CSS를 사용하는 Apple 애니메이션 문제

Question

저는 HTML과 CSS, 인라인 스타일과 TypeScript를 사용하여 React에서 이 애니메이션을 다시 만들려고 합니다. 스타일 정보가 포함된 개체를 만들고 이를 스타일 속성에서 참조합니다. 아래는 코드입니다. 작동하지 않습니다. 제가 뭘 잘못하고 있는지 잘 모르겠습니다. 스타일이 올바르게 정의 및 참조되지 않은 것 같습니다.

이것은 제가 다시 작성하려고 시도한 원본 Codepen 예제입니다: Apple Animation

이것은 내 코드입니다

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

styled-components 来使您的组件更灵活和兼容。我使用 styled-componentscodepen 예제를 복제하고 쉽게 확장할 수 있는 를 사용해 볼 수 있습니다.

따라서 TopAnimateBlock 및 BottomAnimateBlock에는 모두 블록 내부에 몇 줄이 있는지 나타내는 TopAnimateBlock 和 BottomAnimateBlock 都有 numOfLine 属性，表示块内有多少行。在 BottomAnimateBlock 中的第二个属性是 delayTopLine，它应该与 TopAnimateBlocknumOfLine 속성이 있습니다. BottomAnimateBlock의 두 번째 속성은 delayTopLine

이며, 맨 위 행이 재생될 때까지 기다려야 하기 때문에 TopAnimateBlock의

numOfLineTextStyle 수와 동일해야 합니다. 또한 의 color 속성을 통해 텍스트 색상을 쉽게 변경할 수 있으며 색상 값, HEX 색상 또는 rgba()

/

hsla()

을 전달할 수 있습니다.

TextAnimation.tsx 으아악

1. 2행 대신 3행에 애니메이션을 적용하려면 다음을 추가/변경하세요. TextStyle
2. 새 TopAnimateBlock 中将 numOfLine 从2更改为3，在 BottomAnimateBlock 구성요소 추가 TopAnimateBlock에서
numOfLine
3. 을 2에서 3으로 변경하고 BottomAnimateBlock에서
delayTopLine

을 2에서 3🎜으로 변경했습니다. 🎜키프레임을 다음 클립으로 교체하세요. 🎜 🎜 으아악