Fikiria hili: unajiunga na mradi mpya, unaingia kwenye msingi wa kanuni, na ndani ya saa chache za kwanza, utagundua kitu kinachofadhaisha. Katika laha za mitindo, unapata ufafanuzi mwingi wa @keyframes kwa uhuishaji sawa wa kimsingi. Athari tatu tofauti za kufifia, tofauti za slaidi mbili au tatu, uhuishaji machache wa kukuza, na angalau uhuishaji mbili tofauti wa spin kwa sababu, kwa nini sivyo? @mapigo ya keyframes { kutoka { kiwango: 1; } kwa { kiwango: 1.1; } }
@keyframes mshindo mkubwa zaidi { 0%, 20%, 100% { kiwango: 1; } 10%, 40% { kiwango: 1.2; } }
Ikiwa hali hii inaonekana kuwa ya kawaida, hauko peke yako. Katika tajriba yangu katika miradi mbalimbali, mojawapo ya ushindi thabiti thabiti ninaoweza kutoa ni kuunganisha na kusawazisha fremu muhimu. Imekuwa muundo wa kutegemewa hivi kwamba sasa ninatazamia usafishaji huu kama moja ya kazi zangu za kwanza kwenye msingi wowote mpya wa msimbo. Mantiki Nyuma ya Machafuko Upungufu huu unaleta maana kamili unapofikiria juu yake. Sote tunatumia uhuishaji sawa wa kimsingi katika kazi yetu ya kila siku: kufifia, slaidi, ukuzaji, mizunguko, na athari zingine za kawaida. Uhuishaji huu ni wa moja kwa moja, na ni rahisi kuandaa ufafanuzi wa haraka wa @keyframes ili kukamilisha kazi. Bila mfumo wa kati wa uhuishaji, wasanidi programu huandika kwa kawaida fremu hizi muhimu kutoka mwanzo, bila kujua kuwa uhuishaji sawa tayari upo mahali pengine kwenye msingi wa msimbo. Hili ni jambo la kawaida sana wakati wa kufanya kazi katika usanifu unaotegemea vijenzi (ambao wengi wetu hufanya siku hizi), kwani timu mara nyingi hufanya kazi sambamba katika sehemu mbalimbali za programu. Matokeo? Machafuko ya uhuishaji. Tatizo Ndogo Masuala ya dhahiri zaidi yenye urudufishaji wa fremu muhimu ni kupoteza muda wa uundaji na kutoweka kwa msimbo usiohitajika. Ufafanuzi wa fremu nyingi muhimu unamaanisha sehemu nyingi za kusasisha mahitaji yanapobadilika. Je, unahitaji kurekebisha muda wa uhuishaji wako uliofifia? Utahitaji kutafuta kila tukio kwenye msingi wako wa kanuni. Je, ungependa kusawazisha vipengele vya kurahisisha? Bahati nzuri kupata tofauti zote. Kuzidisha huku kwa sehemu za urekebishaji hufanya hata visasisho rahisi vya uhuishaji kuwa kazi inayochukua muda. Tatizo Kubwa Zaidi Urudufu huu wa fremu muhimu huunda tatizo la siri zaidi linalojificha chini ya uso: mtego wa upeo wa kimataifa. Hata wakati wa kufanya kazi na usanifu unaotegemea vijenzi, fremu kuu za CSS hufafanuliwa kila wakati katika wigo wa kimataifa. Hii ina maana kwamba fremu zote muhimu zinatumika kwa vipengele vyote. Daima. Ndiyo, uhuishaji wako si lazima utumie fremu muhimu ulizofafanua katika kijenzi chako. Hutumia fremu kuu za mwisho zinazolingana na jina lile lile ambalo lilipakiwa katika wigo wa kimataifa. Alimradi tu fremu zako zote muhimu zinafanana, hili linaweza kuonekana kama suala dogo. Lakini wakati unapotaka kubinafsisha uhuishaji kwa kesi maalum ya utumiaji, uko kwenye shida, au mbaya zaidi, wewe ndiwe unayesababisha. Labda uhuishaji wako hautafanya kazi kwa sababu kijenzi kingine kinachopakiwa baada yako, kubatilisha fremu zako muhimu, au upakiaji wa kijenzi chako hudumu na hubadilisha kwa bahati mbaya tabia ya uhuishaji kwa kila kijenzi kingine kwa kutumia jina la ufunguo huo, na unaweza hata usiitambue. Hapa kuna mfano rahisi unaoonyesha shida: .kipengele cha kwanza { /* mitindo ya vipengele */ uhuishaji: mpigo 1s urahisi-ndani-nje mbadala usio na kikomo; }
/* ufafanuzi huu wa @keyframes hautafanya kazi */ @mapigo ya keyframes { kutoka { kiwango: 1; } kwa { kiwango: 1.1; } }
/* baadaye katika msimbo... */
.sehemu-pili { /* mitindo ya vipengele */ uhuishaji: mpigo 1s urahisi-ndani-nje usio na kikomo; }
/* fremu hizi muhimu zitatumika kwa vipengele vyote viwili */ @mapigo ya keyframes { 0%, 20%, 100% { kiwango: 1; } 10%, 40% { kiwango: 1.2; } }
Vipengele vyote viwili vinatumia jina moja la uhuishaji, lakini ufafanuzi wa pili wa @keyframes unabatilisha ule wa kwanza. Sasa sehemu-moja na sehemu-mbili zitatumia fremu funguo za pili, bila kujali ni sehemu gani iliyofafanua ni fremu zipi. Tazama Tokeni za Fremu Muhimu za Kalamu - Onyesho la 1 [lililogawanyika] na Amit Sheen. Sehemu mbaya zaidi? Hii mara nyingi hufanya kazi kikamilifu katika ukuzaji wa ndani lakini huharibika kwa njia ya ajabu wakati michakato ya uundaji inapobadilisha mpangilio wa upakiaji wa laha zako za mitindo. Unaishia na uhuishaji ambao hufanya kazi tofauti kulingana na ni vipengele vipi vinavyopakiwa na kwa mlolongo upi. Suluhisho: Fremu Muhimu Zilizounganishwa Jibu la machafuko haya ni rahisi ajabu: fremu muhimu zilizofafanuliwa awali zilizohifadhiwa katika laha ya mitindo iliyoshirikiwa. Badala ya kuruhusu kila sehemu kufafanua uhuishaji wake, tunaunda fremu kuu za kati ambazo zimeandikwa vizuri, rahisikutumia, kudumishwa, na kulengwa kulingana na mahitaji mahususi ya mradi wako. Ifikirie kama tokeni za fremu muhimu. Kama vile tunavyotumia tokeni kwa rangi na nafasi, na wengi wetu tayari tunatumia tokeni kwa sifa za uhuishaji, kama vile muda na utendaji wa kurahisisha, kwa nini usitumie tokeni kwa fremu muhimu pia? Mbinu hii inaweza kuunganishwa kiasili na mtiririko wowote wa tokeni wa muundo wa sasa unaotumia, huku ukisuluhisha tatizo dogo (kurudufu msimbo) na tatizo kubwa zaidi (migogoro ya wigo wa kimataifa) kwa mkupuo mmoja. Wazo ni moja kwa moja: unda chanzo kimoja cha ukweli kwa uhuishaji wetu wote wa kawaida. Laha hii ya mitindo iliyoshirikiwa ina fremu muhimu zilizoundwa kwa uangalifu ambazo hufunika mifumo ya uhuishaji ambayo mradi wetu hutumia. Hakuna kubahatisha tena ikiwa uhuishaji uliofifia tayari upo mahali fulani kwenye msingi wetu wa msimbo. Hakuna tena kubatilisha uhuishaji kwa bahati mbaya kutoka kwa vipengele vingine. Lakini hapa ndio ufunguo: hizi sio tu uhuishaji tuli wa kunakili-kubandika. Zimeundwa ili ziwe na mabadiliko na kugeuzwa kukufaa kupitia sifa maalum za CSS, huturuhusu kudumisha uthabiti huku tungali na wepesi wa kurekebisha uhuishaji kwa hali mahususi za utumiaji, kama vile unahitaji uhuishaji mkubwa zaidi wa "mapigo" katika sehemu moja. Kuunda Tokeni ya Fremu Muhimu za Kwanza Moja ya matunda ya kwanza ambayo yananing'inia tunapaswa kukabiliana nayo ni uhuishaji wa "fifisha ndani". Katika moja ya miradi yangu ya hivi majuzi, nilipata ufafanuzi zaidi ya dazeni tofauti, na ndio, zote zilihuisha uwazi kutoka 0 hadi 1. Kwa hivyo, hebu tuunde laha mpya ya mtindo, tuiite kf-tokens.css, tuilete kwenye mradi wetu, na tuweke fremu zetu kuu zenye maoni yanayofaa ndani yake. /* keyframes-tokens.css */
/* * Fifisha Ndani - fiisha uhuishaji wa kiingilio * Matumizi: uhuishaji: kf-fade-katika 0.3s urahisi-nje; */ @keyframes kf-fifisha-ndani { kutoka { uwazi: 0; } kwa { uwazi: 1; } }
Tamko hili moja la @keyframes linachukua nafasi ya uhuishaji wote uliosambaa kwenye msingi wetu wa msimbo. Safi, rahisi, na inatumika kimataifa. Na sasa kwa kuwa tumefafanuliwa ishara hii, tunaweza kuitumia kutoka kwa sehemu yoyote katika mradi wetu wote: .modali { uhuishaji: kf-fade-katika 0.3s urahisi-nje; }
.kidokezo { uhuishaji: kf-fade-katika 0.2s urahisi-kutoka; }
.taarifa { uhuishaji: kf-fade-katika 0.5s urahisi-nje; }
Tazama Tokeni za Fremu Muhimu za Kalamu - Onyesho la 2 [lililogawanyika] na Amit Sheen. Kumbuka: Tunatumia kiambishi awali cha kf katika majina yetu yote ya @keyframes. Kiambishi awali hiki hutumika kama nafasi ya majina ambayo huzuia ugomvi wa majina na uhuishaji uliopo kwenye mradi na huweka wazi mara moja kwamba fremu hizi muhimu hutoka kwenye faili zetu za tokeni za fremu muhimu. Kutengeneza Slaidi Inayobadilika fremu kuu za kf-fade-in hufanya kazi vizuri kwa sababu ni rahisi na kuna nafasi ndogo ya kuharibu mambo. Katika uhuishaji mwingine, hata hivyo, tunahitaji kuwa na nguvu zaidi, na hapa tunaweza kutumia nguvu kubwa ya sifa maalum za CSS. Hapa ndipo tokeni za fremu muhimu hung'aa sana ikilinganishwa na uhuishaji tuli uliotawanyika. Hebu tuchukue hali ya kawaida: uhuishaji wa "slide-in". Lakini ingia kutoka wapi? 100px kutoka kulia? 50% kutoka kushoto? Je, inapaswa kuingia kutoka juu ya skrini? Au labda kuelea kutoka chini? Uwezo mwingi, lakini badala ya kuunda fremu tofauti za kila mwelekeo na kila tofauti, tunaweza kuunda tokeni moja inayoweza kunyumbulika ambayo inaendana na hali zote: /* * Slaidi Ndani - uhuishaji wa slaidi unaoelekeza * Tumia --kf-slide-kutoka ili kudhibiti mwelekeo * Chaguomsingi: slaidi kutoka kushoto (-100%) * Matumizi: * uhuishaji: kf-slide-katika 0.3s urahisi-nje; * --kf-slide-kutoka: -100px 0; // slaidi kutoka kushoto * --kf-slide-kutoka: 100px 0; // slaidi kutoka kulia * --kf-slide-kutoka: 0 -50px; // slaidi kutoka juu */
@keyframes kf-slaidi-ndani { kutoka { tafsiri: var(--kf-slide-from, -100% 0); } kwa { kutafsiri: 0 0; } }
Sasa tunaweza kutumia tokeni hii ya @keyframes kwa mwelekeo wowote wa slaidi kwa kubadilisha tu --kf-slide-kutoka mali maalum: .upau wa kando { uhuishaji: kf-slide-katika 0.3s urahisi-nje; /* Hutumia thamani chaguo-msingi: slaidi kutoka kushoto */ }
.taarifa { uhuishaji: kf-slide-katika 0.4s urahisi-nje; --kf-slide-kutoka: 0 -50px; /* slaidi kutoka juu */ }
.modali { uhuishaji: kf-fifisha-katika sekunde 0.5, kf-slide-katika 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-kutoka: 50px 50px; /* slaidi kutoka chini-kulia */ }
Mbinu hii inatupa unyumbufu wa ajabu huku tukidumisha uthabiti. Tamko moja la fremu muhimu, uwezekano usio na kikomo. Tazama Tokeni za Fremu Muhimu za Kalamu - Onyesho la 3 [lililogawanyika] na Amit Sheen. Na ikiwa tunataka kufanya uhuishaji wetu kunyumbulika zaidi, kuruhusu athari za "slaidi-out" pia, tunawezaongeza kwa urahisi --kf-slide-kwa mali maalum, sawa na tutakavyoona katika sehemu inayofuata. Fremu Muhimu za Kuza za pande mbili Uhuishaji mwingine wa kawaida ambao unarudiwa katika miradi yote ni athari za "kuza". Iwe ni uongezaji mdogo wa ujumbe wa toast, ukuzaji wa kuvutia wa moduli, au athari ya upole ya kupunguza vichwa, uhuishaji wa kukuza upo kila mahali. Badala ya kuunda fremu tofauti za funguo kwa kila thamani ya mizani, hebu tujenge seti moja inayoweza kunyumbulika ya kf-zoom keyframes:
/* * Kuza - uhuishaji wa kiwango * Tumia --kf-zoom-from na --kf-zoom-to ili kudhibiti viwango vya vipimo * Chaguomsingi: zooms kutoka 80% hadi 100% (0.8 hadi 1) * Matumizi: * uhuishaji: kf-zoom 0.2s urahisi-nje; * --kf-zoom-kutoka: 0.5; --kf-kuza-kwa: 1; // zoom kutoka 50% hadi 100% * --kf-zoom-kutoka: 1; --kf-kuza-kwa: 0; // zoom kutoka 100% hadi 0% * --kf-zoom-kutoka: 1; --kf-kuza-kwa: 1.1; // zoom kutoka 100% hadi 110% */
@keyframes kf-zoom { kutoka { kiwango: var(--kf-zoom-kutoka, 0.8); } kwa { kiwango: var(--kf-zoom-to, 1); } }
Kwa ufafanuzi mmoja, tunaweza kufikia tofauti yoyote ya kukuza tunayohitaji: .tosti { uhuishaji: kf-slaidi-katika sekunde 0.2, kf-zoom 0.4s urahisi-nje; --kf-slide-kutoka: 0 100%; /* slaidi kutoka juu */ /* Hutumia zoom chaguo-msingi: mizani kutoka 80% hadi 100% */ }
.modali { uhuishaji: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-kuza-kutoka: 0; /* zoom kubwa kutoka 0% hadi 100% */ }
.kichwa { uhuishaji: kf-fifisha-katika sekunde 2, kf-zoom 2s urahisi-ndani; --kf-zoom-kutoka: 1.2; --kf-kuza-kwa: 0.8; /* punguza kwa upole */ }
Chaguomsingi ya 0.8 (80%) hufanya kazi kikamilifu kwa vipengele vingi vya UI, kama vile ujumbe wa toast na kadi, huku ikiwa bado ni rahisi kubinafsisha kwa matukio maalum. Tazama Tokeni za Fremu Muhimu za Kalamu - Onyesho la 4 [lililogawanyika] na Amit Sheen. Huenda umeona jambo la kuvutia katika mifano ya hivi majuzi: tumekuwa tukichanganya uhuishaji. Mojawapo ya faida kuu za kufanya kazi na tokeni za @keyframes ni kwamba zimeundwa ili kuunganishwa bila mshono. Utungaji huu laini ni wa kukusudia, sio kwa bahati mbaya. Tutajadili utunzi wa uhuishaji kwa undani zaidi baadaye, ikijumuisha mahali ambapo kunaweza kuwa na matatizo, lakini michanganyiko mingi ni ya moja kwa moja na rahisi kutekelezwa. Kumbuka: Wakati nikiandika nakala hii, na labda kwa sababu ya kuiandika, nilijikuta nikifikiria tena wazo zima la uhuishaji wa kuingilia. Pamoja na maendeleo yote ya hivi majuzi katika CSS, je, bado tunayahitaji hata kidogo? Kwa bahati nzuri, Adam Argyle aligundua maswali yale yale na kuyaeleza kwa ustadi katika blogu yake. Hii haipingani na kile kilichoandikwa hapa, lakini inawasilisha mbinu inayofaa kuzingatia, haswa ikiwa miradi yako inategemea sana uhuishaji wa kuingilia. Uhuishaji Unaoendelea Wakati uhuishaji wa kuingilia, kama vile "fifisha", "slaidi", na "kuza" hutokea mara moja na kisha kukoma, uhuishaji unaoendelea hujirudia kwa muda usiojulikana ili kuvutia watu au kuonyesha shughuli inayoendelea. Mihuisho miwili inayoendelea inayojulikana zaidi ninayokutana nayo ni "spin" (kwa viashiria vya upakiaji) na "pulse" (kwa kuangazia vipengele muhimu). Uhuishaji huu hutoa changamoto za kipekee linapokuja suala la kuunda tokeni za fremu muhimu. Tofauti na uhuishaji wa kuingilia ambao kwa kawaida hutoka hali moja hadi nyingine, uhuishaji unaoendelea unahitaji kugeuzwa kukufaa sana katika mifumo yao ya tabia. Daktari wa Spin Kila mradi unaonekana kutumia michoro nyingi za spin. Wengine huzunguka saa, wengine kinyume cha saa. Wengine hufanya mzunguko mmoja wa digrii 360, wengine hufanya zamu nyingi kwa athari ya haraka. Badala ya kuunda fremu tofauti za funguo kwa kila tofauti, wacha tujenge mduara mmoja unaobadilika ambao unashughulikia hali zote:
/* * Spin - uhuishaji wa mzunguko * Tumia --kf-spin-from na --kf-spin-to ili kudhibiti masafa ya mzunguko * Tumia --kf-spin-turns kudhibiti kiasi cha mzunguko * Chaguomsingi: huzunguka kutoka 0deg hadi 360deg (mzunguko 1 kamili) * Matumizi: * uhuishaji: kf-spin 1s mstari usio na mwisho; * --kf-spin-turns: 2; // 2 mizunguko kamili * --kf-spin-kutoka: 0deg; --kf-spin-hadi: 180deg; // mzunguko wa nusu * --kf-spin-kutoka: 0deg; --kf-spin-hadi: -360deg; // kinyume cha saa */
@keyframes kf-spin { kutoka { zungusha: var(--kf-spin-from, 0deg); } kwa { zungusha: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Sasa tunaweza kuunda tofauti yoyote ya spin tunayopenda:
.loading-spinner { uhuishaji: kf-spin 1s mstari usio na mwisho; /* Hutumia chaguo-msingi: huzunguka kutoka 0deg hadi 360deg */ }
.kipakiaji haraka{ uhuishaji: kf-spin 1.2s urahisi-nje-nje mbadala usio na kikomo; --kf-spin-turns: 3; /* Mizunguko 3 kamili kwa kila mwelekeo kwa kila mzunguko*/ }
.rudi nyuma { uhuishaji: kf-spin 1.5s hatua(8) isiyo na kikomo; --kf-spin-hadi: -360deg; /* kinyume cha saa */ }
.fiche-wiggle { uhuishaji: kf-spin 2s urahisi-ndani-nje mbadala usio na kikomo; --kf-spin-kutoka: -16deg; --kf-spin-hadi: 32deg; /* wiggle 36 deg: kati ya -18deg na +18deg */ }
Tazama Tokeni za Fremu Muhimu za Kalamu - Onyesho la 5 [lililogawanyika] na Amit Sheen. Uzuri wa mbinu hii ni kwamba fremu zile zile muhimu hufanya kazi kwa kupakia viingilizi, ikoni zinazozunguka, athari za wiggle, na hata uhuishaji changamano wa zamu nyingi. Kitendawili cha Pulse Uhuishaji wa mapigo ni mgumu zaidi kwa sababu unaweza "kusukuma" sifa tofauti. Baadhi hupiga mizani, wengine husukuma uwazi, na sifa fulani za rangi ya mapigo kama vile mwangaza au kueneza. Badala ya kuunda fremu funguo tofauti kwa kila kipengele, tunaweza kuunda fremu muhimu zinazofanya kazi na sifa yoyote ya CSS. Hapa kuna mfano wa fremu muhimu ya kunde na chaguzi za kiwango na uwazi:
/* * Pulse - uhuishaji wa msukumo * Tumia --kf-pulse-scale-kutoka na --kf-pulse-scale-hadi kudhibiti masafa * Tumia --kf-pulse-opacity-from na --kf-pulse-opacity-to kudhibiti safu ya uwazi * Chaguomsingi: hakuna mpigo (thamani zote 1) * Matumizi: * uhuishaji: kf-pulse 2s urahisi-ndani-nje mbadala usio na kikomo; * --kf-pulse-scale-kutoka: 0.95; --kf-pulse-scale-hadi: 1.05; // kiwango cha mapigo * --kf-pulse-opacity-kutoka: 0.7; --kf-pulse-opacity-to: 1; // mapigo ya opacity */
@keyframes kf-pulse { kutoka { kiwango: var(--kf-pulse-scale-from, 1); uwazi: var(--kf-pulse-opacity-from, 1); } kwa { kiwango: var(--kf-pulse-scale-to, 1); uwazi: var(--kf-pulse-opacity-to, 1); } }
Hii inaunda mpigo unaobadilika ambao unaweza kuhuisha mali nyingi: .wito-wa-hatua { uhuishaji: kf-pulse 0.6s mbadala usio na kikomo; --kf-pulse-opacity-kutoka: 0.5; /* mapigo ya mwangaza */ }
.kitone-cha taarifa { uhuishaji: kf-pulse 0.6s urahisi-nje-nje mbadala usio na kipimo; --kf-pulse-scale-kutoka: 0.9; --kf-pulse-scale-hadi: 1.1; /* kiwango cha mpigo */ }
.angazia maandishi { uhuishaji: kf-pulse 1.5s urahisi-nje usio; --kf-pulse-scale-kutoka: 0.8; --kf-pulse-opacity-kutoka: 0.2; /* kiwango na mapigo ya mwangaza */ }
Tazama Tokeni za Fremu Muhimu za Kalamu - Onyesho la 6 [lililogawanyika] na Amit Sheen. Fremu hii muhimu ya kf-pulse inaweza kushughulikia kila kitu kutoka kwa kukamata kwa uangalifu kwa uangalifu hadi vivutio vya kushangaza, yote huku ikiwa ni rahisi kubinafsisha. Urahisishaji wa hali ya juu Mojawapo ya mambo mazuri kuhusu kutumia tokeni za fremu muhimu ni jinsi ilivyo rahisi kupanua maktaba yetu ya uhuishaji na kutoa madoido ambayo wasanidi wengi hawatajisumbua kuandika kutoka mwanzo, kama vile elastic au kuteleza. Huu hapa ni mfano wa tokeni rahisi ya fremu za "bounce" ambayo hutumia --kf-bounce-kutoka kwa mali maalum ili kudhibiti urefu wa kuruka. /* * Bounce - uhuishaji wa kuingilia unaovutia * Tumia --kf-bounce-from kudhibiti urefu wa kuruka * Chaguomsingi: anaruka kutoka 100vh (mbali ya skrini) * Matumizi: * uhuishaji: kf-bounce 3s urahisi-ndani; * --kf-bounce-kutoka: 200px; // kuruka kutoka urefu wa 200px */
@keyframes kf-bounce { 0% { tafsiri: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { tafsiri: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { kutafsiri: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { kutafsiri: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { kutafsiri: 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94% { kutafsiri: 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { kutafsiri: 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { kutafsiri: 0 0; uhuishaji-wakati-kazi: urahisi-nje; } }
Uhuishaji kama vile "elastiki" ni mgumu zaidi kwa sababu ya hesabu zilizo ndani ya fremu muhimu. Tunahitaji kufafanua --kf-elastic-from-X na --kf-elastic-from-Y kando (zote ni za hiari), na kwa pamoja zinaturuhusu kuunda mlango wa kunyumbulika kutoka sehemu yoyote kwenye skrini.
/* * Elastic Katika - uhuishaji wa mlango wa elastic * Tumia --kf-elastic-from-X na --kf-elastic-from-Y kudhibiti nafasi ya kuanza * Chaguomsingi: huingia kutoka katikati ya juu (0, -100vh) * Matumizi: * uhuishaji: kf-elastic-in 2s urahisi-kutoka zote mbili; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // ingiza kutoka (-50px, -200px) */
@keyframes kf-elastic-in { 0% { tafsiri: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { tafsiri: calc(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { tafsiri: calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-elastic-kutoka-Y, 0px) * 0.1312); }
44% { tafsiri: calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
59% { tafsiri: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { tafsiri: calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { tafsiri: calc(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { kutafsiri: 0 0; } }
Mbinu hii hurahisisha kutumia tena na kubinafsisha fremu za hali ya juu katika mradi wetu wote, kwa kubadilisha tu kipengele kimoja maalum.
.bounce-na-kuza { uhuishaji: kf-bounce 3s urahisi wa kuingia, kf-zoom 3s mstari; --kf-kuza-kutoka: 0; }
.bounce-na-slaidi { uhuishaji-utungaji: ongeza; /* Uhuishaji wote hutumia kutafsiri */ uhuishaji: kf-bounce 3s urahisi wa kuingia, kf-slide-in 3s urahisi-nje; --kf-slide-kutoka: -200px; }
.elastiki ndani { uhuishaji: kf-elastic-in 2s urahisi-kutoka zote mbili; }
Tazama Tokeni za Fremu Muhimu za Kalamu - Onyesho la 7 [lililogawanyika] na Amit Sheen. Kufikia wakati huu, tumeona jinsi tunavyoweza kuunganisha fremu muhimu kwa njia nzuri na bora. Bila shaka, unaweza kutaka kurekebisha mambo ili yalingane vyema na mahitaji ya mradi wako, lakini tumeangazia mifano ya uhuishaji kadhaa wa kawaida na matukio ya matumizi ya kila siku. Na kwa kutumia tokeni hizi za fremu muhimu, sasa tuna vizuizi thabiti vya kuunda uhuishaji thabiti na unaoweza kudumishwa katika mradi mzima. Hakuna tena fremu muhimu zilizorudiwa, hakuna migongano ya upeo wa kimataifa. Njia safi na rahisi ya kushughulikia mahitaji yetu yote ya uhuishaji. Lakini swali la kweli ni: Je, tunatunga vipi vitalu hivi vya ujenzi pamoja? Kuweka Yote Pamoja Tumeona kuwa kuchanganya tokeni za msingi za fremu ni rahisi. Hatuhitaji kitu chochote maalum lakini kufafanua uhuishaji wa kwanza, kufafanua ya pili, kuweka vigezo kama inahitajika, na ndivyo hivyo. /* Fifisha katika + slaidi katika */ .tosti { uhuishaji: kf-fifisha-katika sekunde 0.4, kf-slide-katika 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-kutoka: 0 40px; }
/* Vuta + fifia ndani */ .modali { uhuishaji: kf-fifisha-katika sekunde 0.3, kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-kutoka: 0.7; --kf-kuza-kwa: 1; }
/* Telezesha kidole katika + mpigo */ .taarifa { uhuishaji: kf-slaidi-katika sekunde 0.5, kf-pulse 1.2s urahisi-ndani-nje mbadala usio na kikomo; --kf-slide-kutoka: -100px 0; --kf-pulse-scale-kutoka: 0.95; --kf-pulse-scale-hadi: 1.05; }
Michanganyiko hii hufanya kazi kwa uzuri kwa sababu kila uhuishaji unalenga sifa tofauti: uwazi, badilisha (tafsiri/mizani), n.k. Lakini wakati mwingine kuna migogoro, na tunahitaji kujua ni kwa nini na jinsi ya kukabiliana nayo. Wakati uhuishaji mbili zinapojaribu kuhuisha sifa sawa - kwa mfano, kiwango cha uhuishaji au upenyezaji wa uhuishaji - matokeo hayatakuwa vile unavyotarajia. Kwa chaguo-msingi, uhuishaji mmoja tu ndio unaotumika kwa sifa hiyo, ambayo ndiyo ya mwisho katika orodha ya uhuishaji. Hiki ni kizuizi cha jinsi CSS inavyoshughulikia uhuishaji nyingi kwenye mali moja. Kwa mfano, hii haitafanya kazi kama ilivyokusudiwa kwa sababu ni uhuishaji wa kf-pulse pekee ndio utakaotumika. .bad-combo { uhuishaji: kf-zoom 0.5s mbele, kf-pulse 1.2s mbadala usio na mwisho; --kf-zoom-kutoka: 0.5; --kf-kuza-kwa: 1.2; --kf-pulse-scale-kutoka: 0.8; --kf-pulse-scale-hadi: 1.1; }
Nyongeza ya Uhuishaji Njia rahisi na ya moja kwa moja ya kushughulikia uhuishaji mwingi unaoathiri mali sawa ni kutumia sifa ya uhuishaji-utunzi. Katika mfano wa mwisho hapo juu, uhuishaji wa kf-pulse unachukua nafasi ya uhuishaji wa kf-zoom, kwa hivyo hatutaona ukuzaji wa awali na hatutapata kipimo kinachotarajiwa hadi 1.2. Kwa kuweka utunzi wa uhuishaji wa kuongeza, tunaambia kivinjari kuchanganya uhuishaji wote. Hii inatupa matokeo tunayotaka. .sehemu-pili { uhuishaji-utungaji: ongeza; }
Tazama Tokeni za Fremu Muhimu za Kalamu - Onyesho la 8 [lililogawanyika] na Amit Sheen. Mbinu hii inafanya kazi vizuri kwa hali nyingi ambapo tunataka kuchanganya athari kwenye mali sawa. Pia ni muhimu tunapohitaji kuchanganya uhuishaji na thamani za mali tuli. Kwa mfano, ikiwa tuna kipengele kinachotumia kipengele cha kutafsiri ili kuiweka pale tunapotaka, kisha tunataka kuhuisha kwa kutumia fremu kuu za kf-slaidi-ndani, tunapata mruko mbaya unaoonekana bila utunzi wa uhuishaji. Tazama Tokeni za Fremu Muhimu za Kalamu - Onyesho la 9 [lililogawanyika] na Amit Sheen. Ukiwa na utunzi wa uhuishaji uliowekwa ili kuongeza, uhuishaji umeunganishwa vizuri na uliopobadilisha, ili kipengele kikae mahali na kuhuisha kama inavyotarajiwa. Uhuishaji Stagger Njia nyingine ya kushughulikia uhuishaji mwingi ni "kuwakongoja" - yaani, kuanza uhuishaji wa pili kidogo baada ya ule wa kwanza kukamilika. Si suluhu linalofanya kazi kwa kila kesi, lakini ni muhimu tunapokuwa na uhuishaji wa kiingilio ukifuatwa na uhuishaji unaoendelea. /* kufifia katika + mapigo ya uwazi */ .taarifa { uhuishaji: kf-fade-in 2s urahisi-nje, kf-pulse 0.5s 2s urahisi-ndani-nje mbadala usio na kipimo; --kf-pulse-opacity-hadi: 0.5; }
Tazama Tokeni za Fremu Muhimu za Kalamu - Onyesho la 10 [limegawanyika] na Amit Sheen. Mambo ya Kuagiza Sehemu kubwa ya uhuishaji tunaofanya kazi nao hutumia mali ya kubadilisha. Katika hali nyingi, hii ni rahisi zaidi. Pia ina faida ya utendaji kwani uhuishaji wa kubadilisha unaweza kuharakishwa na GPU. Lakini ikiwa tunatumia mageuzi, tunahitaji kukubali kwamba utaratibu ambao tunafanya mabadiliko yetu ni muhimu. Mengi. Katika fremu zetu muhimu kufikia sasa, tumetumia mabadiliko ya mtu binafsi. Kwa mujibu wa vipimo, hizi hutumiwa daima kwa utaratibu uliowekwa: kwanza, kipengele kinapata kutafsiri, kisha kuzunguka, kisha kupima. Hii ina maana na ndivyo wengi wetu tunavyotarajia. Hata hivyo, ikiwa tunatumia mali ya kubadilisha, utaratibu ambao kazi zimeandikwa ni utaratibu ambao hutumiwa. Katika kesi hii, ikiwa tunasonga kitu kwa saizi 100 kwenye mhimili wa X na kisha kukizungusha kwa digrii 45, sio sawa na kukizungusha kwanza kwa digrii 45 na kisha kuisogeza saizi 100. /* Mraba wa pinki: Kwanza tafsiri, kisha zungusha */ .mfano wa kwanza { badilisha: translateX(100px) zungusha(45deg); }
/* Mraba wa kijani: Kwanza zungusha, kisha utafsiri */ .mfano-mbili { badilisha: zungusha(45deg) translateX(100px); }
Tazama Tokeni za Fremu Muhimu za Kalamu - Onyesho la 11 [lililogawanyika] na Amit Sheen. Lakini kulingana na mpangilio wa mabadiliko, kila mtu hubadilisha - kila kitu ambacho tumetumia kwa tokeni za fremu muhimu - hufanyika kabla ya kubadilisha kazi. Hiyo inamaanisha kuwa chochote unachoweka katika mali ya kubadilisha kitatokea baada ya uhuishaji. Lakini ukiweka, kwa mfano, kutafsiri pamoja na fremu za kf-spin, tafsiri itatokea kabla ya uhuishaji. Bado umechanganyikiwa?! Hii husababisha hali ambapo maadili tuli yanaweza kusababisha matokeo tofauti kwa uhuishaji sawa, kama katika kesi ifuatayo:
/* Uhuishaji wa kawaida kwa wazungukaji wote wawili */ .spinner { uhuishaji: kf-spin 1s mstari usio na mwisho; }
/* Pink spinner: tafsiri kabla ya kuzungusha (badilisha mtu binafsi) */ .spinner-pink { kutafsiri: 100% 50%; }
/* Spinner ya kijani: zungusha kisha utafsiri (mpangilio wa kazi) */ .spinner-kijani { badilisha: tafsiri (100%, 50%); }
Tazama Tokeni za Fremu Muhimu za Kalamu - Onyesho la 12 [lililogawanyika] na Amit Sheen. Unaweza kuona kwamba spinner ya kwanza (pink) inapata tafsiri ambayo hutokea kabla ya mzunguko wa kf-spin, kwa hiyo kwanza inahamia mahali pake na kisha inazunguka. Spinner ya pili (kijani) hupata kitendakazi cha translate() ambacho hutokea baada ya mabadiliko ya mtu binafsi, kwa hivyo kipengele kwanza huzunguka, kisha husogea kuhusiana na pembe yake ya sasa, na tunapata athari hiyo ya obiti pana. Hapana, hii sio mdudu. Ni moja tu ya mambo hayo tunayohitaji kujua kuhusu CSS na kukumbuka tunapofanya kazi na uhuishaji nyingi au mabadiliko mengi. Ikihitajika, unaweza pia kuunda seti ya ziada ya fremu kuu za kf-spin-alt ambazo huzungusha vipengele kwa kutumia kitendakazi cha rotate(). Mwendo uliopunguzwa Na tunapozungumza kuhusu fremu muhimu mbadala, hatuwezi kupuuza chaguo la "hakuna uhuishaji". Mojawapo ya faida kubwa za kutumia tokeni za fremu muhimu ni kwamba ufikivu unaweza kuokwa, na kwa kweli ni rahisi sana kufanya. Kwa kuunda fremu zetu muhimu tukizingatia ufikivu akilini, tunaweza kuhakikisha kuwa watumiaji wanaopendelea mwendo uliopunguzwa wanapata utumiaji laini, usiosumbua, bila kazi ya ziada au kunakili msimbo. Maana kamili ya "Mwendo Uliopunguzwa" inaweza kubadilika kidogo kutoka kwa uhuishaji mmoja hadi mwingine, na kutoka mradi hadi mradi, lakini hapa kuna mambo machache muhimu ya kukumbuka: Inazima Fremu Muhimu Ingawa baadhi ya uhuishaji unaweza kulainika au kupunguzwa kasi, kuna mingine ambayo inapaswa kutoweka kabisa wakati mwendo uliopunguzwa unapoombwa. Uhuishaji wa mapigo ni mfano mzuri. Ili kuhakikisha kuwa uhuishaji huu hauendeshwi katika hali iliyopunguzwa ya mwendo, tunaweza kuifunga kwa hoja inayofaa ya maudhui.
@media (inapendelea-mwendo-kupunguzwa: hakuna upendeleo) { @keyfrmaes kf-pulse { kutoka { kiwango: var(--kf-pulse-scale-from, 1); uwazi: var(--kf-pulse-opacity-from, 1); } kwa { kiwango: var(--kf-pulse-scale-to, 1); uwazi:var(--kf-pulse-opacity-to, 1); } } }
Hii inahakikisha kwamba watumiaji ambao wameweka mapendeleo-kupunguzwa-mwendo ili kupunguza hawataona uhuishaji na watapata matumizi yanayolingana na mapendeleo yao. Instant In Kuna baadhi ya fremu muhimu ambazo hatuwezi kuondoa tu, kama vile uhuishaji wa kuingilia. Thamani lazima ibadilike, lazima ihuishwe; vinginevyo, kipengele hakitakuwa na maadili sahihi. Lakini kwa mwendo uliopunguzwa, mpito huu kutoka kwa thamani ya awali unapaswa kuwa papo hapo. Ili kufanikisha hili, tutafafanua seti ya ziada ya fremu muhimu ambapo thamani inaruka mara moja hadi mwisho. Hizi huwa fremu zetu msingi msingi. Kisha, tutaongeza fremu kuu za kawaida ndani ya hoja ya midia kwa mwendo wa mapendeleo-kupunguzwa-kuwekwa kwa kutokupendelea, kama ilivyo katika mfano uliopita. /* ingia papo hapo kwa mwendo uliopunguzwa */ @keyframes kf-zoom { kutoka, hadi { kiwango: var(--kf-zoom-to, 1); } }
@media (inapendelea-mwendo-kupunguzwa: hakuna upendeleo) { /* Fremu funguo za kukuza asili */ @keyframes kf-zoom { kutoka { kiwango: var(--kf-zoom-kutoka, 0.8); } kwa { kiwango: var(--kf-zoom-to, 1); } } }
Kwa njia hii, watumiaji wanaopendelea mwendo uliopunguzwa wataona kipengele kikionekana papo hapo katika hali yake ya mwisho, huku kila mtu mwingine akipata mpito uliohuishwa. Mbinu Laini Kuna matukio ambapo tunataka kuweka harakati, lakini laini na utulivu zaidi kuliko uhuishaji asili. Kwa mfano, tunaweza kuchukua nafasi ya lango la bounce na kufifia kwa upole.
@keyframes kf-bounce { /* Kufifia kwa upole kwa mwendo uliopunguzwa */ }
@media (inapendelea-mwendo-kupunguzwa: hakuna upendeleo) { @keyframes kf-bounce { /* fremu za funguo asilia */ } }
Sasa, watumiaji walio na mwendo mdogo uliowezeshwa bado wanapata hali ya mwonekano, lakini bila msogeo mkali wa mdundo au uhuishaji nyororo. Vizuizi vya ujenzi vikiwa mahali, swali linalofuata ni jinsi ya kuzifanya kuwa sehemu ya mtiririko halisi wa kazi. Kuandika fremu muhimu zinazonyumbulika ni jambo moja, lakini kuzifanya ziwe za kuaminika katika mradi mkubwa kunahitaji mikakati michache ambayo ilinibidi kujifunza kwa bidii. Mikakati ya Utekelezaji & Mbinu Bora Mara tu tunapokuwa na maktaba thabiti ya tokeni za fremu muhimu, changamoto halisi ni jinsi ya kuzileta katika kazi ya kila siku.
Jaribio ni kuacha fremu zote muhimu kwa wakati mmoja na kutangaza shida kutatuliwa, lakini kwa mazoezi nimegundua kuwa matokeo bora hutoka kwa kupitishwa polepole. Anza na uhuishaji unaojulikana zaidi, kama vile kufifia au slaidi. Haya ni ushindi rahisi ambao unaonyesha thamani ya haraka bila kuhitaji maandishi makubwa tena. Kutaja ni jambo lingine linalostahili kuzingatiwa. Kiambishi awali thabiti au nafasi ya majina huifanya iwe wazi ni uhuishaji gani ni tokeni na zipi ni za kienyeji za awamu moja. Pia huzuia migongano ya kiajali na husaidia washiriki wapya wa timu kutambua mfumo ulioshirikiwa kwa haraka. Hati ni muhimu kama msimbo yenyewe. Hata maoni mafupi juu ya kila tokeni ya fremu muhimu yanaweza kuokoa saa za kubahatisha baadaye. Msanidi programu anapaswa kuwa na uwezo wa kufungua faili ya tokeni, kuchanganua madoido anayohitaji, na kunakili muundo wa matumizi moja kwa moja kwenye kijenzi chake. Unyumbufu ndio unaofanya mbinu hii istahili juhudi. Kwa kufichua sifa maalum za busara, tunazipa timu nafasi ya kurekebisha uhuishaji bila kuvunja mfumo. Wakati huo huo, jaribu kuzidisha. Toa vifundo ambavyo ni muhimu na uwaweke wengine kuwa na maoni. Hatimaye, kumbuka upatikanaji. Sio kila uhuishaji unahitaji njia mbadala iliyopunguzwa ya mwendo, lakini wengi hufanya hivyo. Kuoka katika marekebisho haya mapema kunamaanisha kwamba hatutawahi kuyarejesha baadaye, na inaonyesha kiwango cha uangalifu ambacho watumiaji wetu wataona hata kama hawatataja kamwe.
Katika uzoefu wangu, kutibu tokeni za fremu muhimu kama sehemu ya utiririshaji wa tokeni zetu za muundo ndiko kunakozifanya zishikamane. Pindi zinapowekwa, huacha kuhisi kama athari maalum na kuwa sehemu ya lugha ya kubuni, kiendelezi cha asili cha jinsi bidhaa inavyosonga na kujibu. Kuhitimisha Uhuishaji unaweza kuwa sehemu ya kufurahisha zaidi ya miingiliano ya jengo, lakini bila muundo, unaweza pia kuwa moja ya vyanzo vikubwa vya kufadhaika. Kwa kuchukulia fremu muhimu kama tokeni, unachukua kitu ambacho kwa kawaida ni chafu na kigumu kudhibiti na kukigeuza kuwa mfumo wazi na unaotabirika. Thamani halisi sio tu katika kuhifadhi mistari michache ya msimbo. Ni kwa kujiamini kwamba unapotumia kufifisha, kutelezesha, kuvuta, au kuzunguka, unajua jinsi itakavyokuwa katika mradi wote. Ni katika unyumbufu unaotokana na mali maalum bila machafuko ya tofauti zisizo na mwisho. Na ni katika ufikiaji uliojengwa kwenye msingi badala ya kuongezwa kamamawazo ya baadaye. Nimeona mawazo haya yakifanya kazi katika timu tofauti na misingi tofauti ya kanuni, na muundo ni sawa kila wakati. Mara tu ishara zimewekwa, fremu muhimu huacha kuwa mkusanyiko uliotawanyika wa hila na kuwa sehemu ya lugha ya muundo. Wanafanya bidhaa kuhisi kukusudia zaidi, thabiti zaidi, na hai zaidi. Ukichukua jambo moja kutoka kwa nakala hii, acha iwe hivi: uhuishaji unastahili uangalifu sawa na muundo ambao tayari tunatoa kwa rangi, uchapaji na nafasi. Uwekezaji mdogo katika tokeni za fremu muhimu hulipa kila wakati kiolesura chako kinaposogezwa.
