Rumah > Soal Jawab > teks badan
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 };
P粉1158400762024-01-11 10:37:49
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,它应该与 TopAnimateBlock
numOfLine, yang menunjukkan bilangan baris di dalam blok. Sifat kedua dalam BottomAnimateBlock
ialah delayTopLine
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()
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> </> ); };
TextStyle
TopAnimateBlock
中将 numOfLine 从2更改为3,在 BottomAnimateBlock
komponen baharu
Menukar TopAnimateBlock
dan 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); } `;