அனிமேஷன்-தூண்டுதல் | CSS-தந்திரங்கள்

CSS animation-trigger ஒரு குறிப்பிட்ட தூண்டுதல் ஏற்படும் வரை சொத்து CSS அனிமேஷனின் தொடக்கத்தை தாமதப்படுத்துகிறது. குறிப்பாக, இது சொல்லப்பட்ட தூண்டுதலைக் கேட்கிறது மற்றும் அனிமேஷன் எவ்வாறு இயங்குகிறது அல்லது பதிலுக்கு இடைநிறுத்தப்படுகிறது என்பதைக் கட்டுப்படுத்துகிறது.

.element {
  animation: fade-in 0.35s ease-in-out both;
  animation-trigger: --trigger play-forwards play-backwards;
}

இந்த நடத்தை பாரம்பரியமாக ஜாவாஸ்கிரிப்ட்டின் சாம்ராஜ்யமாக இருந்து வருகிறது, பொதுவாக இன்டர்செக்ஷன் அப்சர்வர் API உடன்.

நகரும் அனிமேஷன்களை நகரும் அனிமேஷன்களுடன் குழப்பக்கூடாது. இரண்டும் இயக்கம் அல்லது பார்வை அட்டவணையை நம்பியிருந்தாலும், அவை அடிப்படையில் வேறுபட்ட கருத்துக்கள். ஒரு நிமிடத்தில் அந்த வேறுபாடுகளை அடைவோம்.

இல் animation-trigger அனிமேஷன் தூண்டுதல் விவரக்குறிப்பில் சொத்து வரையறுக்கப்படுகிறது

தொடரியல்

animation-trigger: none |   [];

• ஆரம்ப மதிப்பு: none
• இதற்குப் பொருந்தும்: அனைத்து கூறுகளும்
• மரபு: இல்லை
• கணக்கிடப்பட்ட மதிப்பு: என வரையறுக்கப்பட்டுள்ளது
• அனிமேஷன் வகை: அனிமேஷன் செய்யப்படவில்லை

மதிப்புகள்

சொத்து ஏற்கிறது noneஅல்லது காற்புள்ளியால் பிரிக்கப்பட்ட தூண்டுதல்களின் பட்டியல் மற்றும் அவற்றுடன் தொடர்புடைய செயல்கள்:

• none: இயல்புநிலை பயன்முறை. அனிமேஷன் சாதாரணமாக செயல்படுகிறது மற்றும் தூண்டப்பட்ட அனிமேஷன் அல்ல.
• : சமரசம் செய்யப்பட்ட அடையாளம் (எ.கா --fade-in-trigger) நீங்கள் கேட்க விரும்பும் தூண்டுதலின். மூலம் அழைக்கப்பட வேண்டும் timeline-trigger அல்லது event-trigger பண்புகள்.
• : ஒன்று அல்லது அதற்கு மேற்பட்ட முக்கிய வார்த்தைகள் தூண்டுதல் இயக்கப்படும் போது என்ன செய்ய வேண்டும் என்று கட்டளையிடுகிறது (மற்றும் விருப்பமாக, அது செயலிழக்கப்படும் போது). இதை மேலும் பிரிக்கலாம்:
  • : தூண்டுதல் நிலை “ஆன்” ஆக இருக்கும் போது என்ன நடக்கும் என்பதைக் கூறுகிறது.
  • (விரும்பினால்): தூண்டுதல் நிலை “செயலற்ற” நிலைக்குத் திரும்பும்போது என்ன நடக்கும் என்று ஆணையிடுகிறது. இயல்பாக, அது none.

“தூண்டுதல்” animation-trigger ஸ்க்ரோலிங் அல்லது முன்னேற்ற அட்டவணைகளைப் பார்ப்பது போன்ற அட்டவணை அடிப்படையிலான தூண்டுதல்கள் அல்லது DOM நிகழ்வுகள் (எ.கா. கிளிக்) போன்ற நிகழ்வு அடிப்படையிலான தூண்டுதல்களைக் குறிப்பிடலாம். இந்த பதிவில், டைம்லைன் தூண்டுதல்களில் முக்கியமாக கவனம் செலுத்துவோம். நிகழ்வு அடிப்படையிலான தூண்டுதல்களைப் பற்றி நீங்கள் ஆர்வமாக இருந்தால், அதிகாரப்பூர்வ விவரக்குறிப்பைப் பார்க்கலாம்.

இயல்பாக, தூண்டுதல் பெயர்கள் a கொண்டிருக்கும் உலகளாவிய நோக்கம். பல உறுப்புகள் ஒரே தூண்டுதல் பெயரை வரையறுத்தால், அடுக்கில் பின்னர் வரும் உறுப்பு தேர்ந்தெடுக்கப்படும். தூண்டுதலின் நோக்கத்தை நீங்கள் DOM இன் குறிப்பிட்ட சப்ட்ரீக்கு வரம்பிடலாம் trigger-scope சொத்து

அனிமேஷன் நடவடிக்கைகள்

• play-forwards: கேம் வீதத்தை நேர்மறையாக அமைத்து அனிமேஷனை இயக்குகிறது.
• play-backwards: பின்னணி வீதத்தை எதிர்மறையாக அமைக்கிறது மற்றும் அனிமேஷனை தலைகீழாக இயக்குகிறது.
• play: அனிமேஷனை அதன் தற்போதைய வேகத்தில் இயக்குகிறது.
• play-once: ஆரம்ப அல்லது இடைநிறுத்தப்பட்ட நிலையில் இருந்து மட்டுமே அனிமேஷனை இயக்குகிறது. அனிமேஷன் ஏற்கனவே விளையாடி முடித்திருந்தால் அது தூண்டுதலைப் புறக்கணிக்கும்.
• pause: அனிமேஷனை இடத்தில் முடக்குகிறது.
• reset: அனிமேஷன் முன்னேற்றத்தை விரைவாக வழங்குகிறது 0 மற்றும் நிறுத்தங்கள்.
• replay: முன்னேற்றத்தை மீண்டும் அமைக்கிறது 0 மற்றும் உடனடியாக விளையாடுகிறது.
• none: எதுவும் செய்யாது.

சில செயல்கள் இல்லை அல்லது அது சாத்தியம் என்று மட்டுமே அர்த்தம் play-backwards நுழையும் போது மற்றும் play-forwards வெளியேறும் போது.

அட்டவணை தூண்டுகிறது

உண்மையில் அதை பயன்படுத்த animation-triggerநீங்கள் முதலில் காலவரிசை தூண்டுதலை உள்ளமைக்க வேண்டும். காலக்கெடுவுக்குள் உறுப்பு எங்குள்ளது (இயக்கம் அல்லது காட்சிப் பகுதியின் நிலை போன்றவை) அடிப்படையில் அனிமேஷன் தொடங்கும் போது இது கட்டுப்படுத்துகிறது. குறிப்பாக, இந்த அட்டவணையில் ஒரு உறுப்பு ஒரு குறிப்பிட்ட செயல்படுத்தும் வரம்பில் நுழையும் போது அது செயல்படுத்தப்படுகிறது.

அட்டவணை தூண்டுதலை அமைக்க, நீங்கள் முதலில் ஒரு பழக்கத்தை வரையறுக்க வேண்டும் (எ.கா --fade-in) அதை உங்களுடன் இணைக்க animation-trigger அதன் பிறகு ஏ ஒரு போன்ற காலவரிசை view() அல்லது scroll() செயல்பாடு

timeline-trigger-name: --fade-in;
timeline-trigger-source: view();

பிறகு நீங்கள் முடிவு செய்யுங்கள் (போன்ற contain) துல்லியமாக ஆணையிட எப்போது டிஸ்ப்ளே போர்ட்டின் உள்ளே தூண்டுதல் “தூண்டப்பட்டது”.

timeline-trigger-activation-range: contain;

நீங்களும் தன்னார்வத் தொண்டு செய்யலாம் வெளிப்புற எல்லையை வரையறுக்க, தூண்டுதல் “ஆஃப்” ஆகும் முன் செயலில் இருக்கும், இருப்பினும் நீங்கள் அதை விட்டால், உலாவி உங்கள் செயல்படுத்தும் வரம்பிற்கு இயல்பாக இருக்கும்.

timeline-trigger-active-range: cover;

இது எவ்வாறு செயல்படுகிறது என்பதை நன்கு புரிந்துகொள்ள, Chrome குழுவிடமிருந்து நேர வரம்பு காட்சிப்படுத்தலைப் பார்க்கவும்.

நீங்கள் பல வரம்புகளைப் பயன்படுத்தினால், செயலில் உள்ள வரம்பில் செயல்படுத்தும் வரம்பு இருக்க வேண்டும்; இல்லையெனில், தூண்டுதலை “செயல்படுத்த” முடியாது.

நீங்கள் போது முடியும் அனைத்து நீண்ட தனிப்பட்ட பண்புகளையும் பயன்படுத்தவும்:

• timeline-trigger-name
• timeline-trigger-source
• timeline-trigger-activation-range
• timeline-trigger-active-range

… இதற்குப் பதிலாக நீங்கள் எப்போதும் சுருக்கெழுத்தைப் பயன்படுத்த விரும்புவீர்கள்:

timeline-trigger: none |    [ / ];

பல CSS சுருக்கெழுத்துக்களைப் போலல்லாமல் (எ.கா background அல்லது border), வேண்டும் மதிப்புகளின் வரிசை இங்கே முக்கியமானதுஎனவே நீங்கள் அவற்றை சுதந்திரமாக மீட்டமைக்க முடியாது.

தூண்டுதல்கள் மற்றும் அனிமேஷன்கள் ஒரே உறுப்பில் இருக்க வேண்டியதில்லை என்பதை கவனத்தில் கொள்ள வேண்டும். நீங்கள் தீர்மானிக்க முடியும் timeline-trigger பெற்றோர் மற்றும் செயல்படுத்தல் பற்றி animation-trigger பல குழந்தை கூறுகளுக்கு. பெற்றோர் காட்சிக்குள் நுழையும் போது, ​​எல்லா குழந்தைகளும் ஒன்றாக அனிமேஷன் செய்யலாம்.

தூண்டுதல்களைப் பயன்படுத்துதல்

எளிமையான எளிய உரை அனிமேஷனை உருவாக்குவோம். ஒரு உறுப்பு என வரையறுக்கிறோம் தூண்டுதல் புள்ளி. நீங்கள் அதைக் கடக்கும்போது, ​​​​அனிமேஷன் இயங்குகிறது மற்றும் உரை மங்கிவிடும்.

முதலில், தூண்டுதல் உறுப்பில் நேரத் தூண்டுதலை வரையறுக்கவும்:

.trigger {
  timeline-trigger: --trigger scroll() contain / cover;
}

இது பெயருடன் ஒரு தூண்டுதலை அமைக்கிறது --trigger இது இயக்க நிலையின் அடிப்படையில் செயல்படுத்தப்படுகிறது. வரம்பு contain / cover உறுப்பு சுழற்சியில் முழுமையாகத் தெரியும் போது அனிமேஷன் தூண்டப்படுகிறது (contain) மற்றும் அதன் எந்தப் பகுதியும் சுழற்சியில் இருக்கும் வரை தொடர்ந்து வேலை செய்கிறது (cover)

அடுத்து, நாங்கள் விண்ணப்பிக்கிறோம் animation-trigger நீங்கள் அனிமேஷன் செய்ய விரும்பும் உரைக்கு, அனிமேஷனுடன்:

.text {
  animation-trigger: --trigger play;
  animation: fade 0.6s ease-out;
}

வேடிக்கையான பகுதி என்னவென்றால், நீங்கள் வெவ்வேறுவற்றைக் கலந்து பொருத்தலாம் animation-action ஒரே தூண்டுதலைப் பயன்படுத்தி மிகவும் மாறுபட்ட நடத்தையை அடைய மதிப்புகள். வெவ்வேறு அனிமேஷன் செயல்களுடன் ஒரே அமைப்பைக் காட்டும் விரைவான டெமோ இங்கே:

உடன் நகரும் அனிமேஷன்கள்அனிமேஷனின் முன்னேற்றம் அதனுடன் நேரடியாக தொடர்புடையது நிலையை நகர்த்தவும். நீங்கள் நகரும் போது, ​​அனிமேஷன் காலவரிசையுடன் ஒத்திசைந்து முன்னோக்கி அல்லது பின்னோக்கி நகரும். “தொடங்கு” அல்லது “தீ” தருணம் என்ற கருத்து இல்லை.

பராக்ஸ், நகரும் அனிமேஷன்கள் உள்ளன மாநிலத்தை அடிப்படையாகக் கொண்டது தொடர்ச்சியாக இல்லை. தூண்டுதல் ஒரு பைனரி நிலையைக் கொண்டுள்ளது மற்றும் ஒரு நிபந்தனையை பூர்த்தி செய்யும் போது, ​​எடுத்துக்காட்டாக ஒரு உறுப்பு ஒரு குறிப்பிட்ட வரம்பில் நுழைகிறது, தூண்டுதல் தொடர்புடைய செயலைத் தொடங்குகிறது (எ.கா. play, pauseஅல்லது reset) இயக்கப்பட்டதும், வழிசெலுத்தல் முன்னேற்ற இணைப்பு இல்லாமல், அனிமேஷன் உங்கள் வழக்கமான CSS அனிமேஷன்களைப் போலவே செயல்படும்.

இரண்டுக்கும் இடையே உள்ள வித்தியாசத்தைக் காண, utlitybend இன் உபயம் மூலம் இதோ ஒரு நல்ல டெமோ:

விவரக்குறிப்புகள்

இல் animation-trigger அனிமேஷன் தூண்டுதல் விவரக்குறிப்பில் சொத்து வரையறுக்கப்பட்டுள்ளது, இது தற்போது எடிட்டர் லேஅவுட்களில் உள்ளது. இதன் பொருள் இப்போது மற்றும் அதிகாரப்பூர்வ வேட்பாளர் பரிந்துரையாக மாறுவதற்கு இடையில் தகவல் மாறலாம்.

உலாவி ஆதரவு

இதை எழுதும் போது Chrome 145+ மட்டுமே.

மேலும் வாசிப்பு

தொடர்புடைய கட்டுரைகள்

தொடர்புடையது