Norėdami susieti animacijas su CSS, naudokite „JavaScript“

Turinys

• Antkainis
• Stiliai
• Scenarijus
• CSS animacijos renginiai
• Apibendrinant

Praėjo ketveri su puse metų, kai CSS perėjimai pirmą kartą buvo pristatyti „WebKit“, ir praėjo treji metai, kai prie jų prisijungė CSS pagrindinio kadro animacijos. Abi dabar artėja prie naršyklės diegimo taško - jas palaiko „Chrome“, „Safari“ ir „Firefox“, o tai reiškia, kad jas jau gali naudoti maždaug 50–60 procentų žiniatinklio vartotojų, o netrukus jos bus „Opera 12“ ir „Internet Explorer 10“. Tai reiškia, kad jie yra pasirengę atkreipti dėmesį.

CSS animacijų ir perėjimų naudojimas, nuo šiol žinomas kaip CSS animacija, jau buvo gerai aptartas (ne mažiau kaip .net), todėl šioje pamokoje aš jums parodysiu, kaip CSS animacijas galima susieti grandinėmis naudojant „JavaScript“ įvykių tvarkytuvus, kurie tikrai padidina jų potencialą. Aš tai padarysiu pastatydamas labai paprastą, sukrautų kortelių karuselės rūšį - kuri apverčia pasirinktų vaizdų rinkinį.

• Reikalingos žinios: Tarpinis CSS, pagrindinis HTML, tarpinis „JavaScript“
• Reikalauja: „jQuery“, „Modernizr“, moderni interneto naršyklė
• Projekto laikas: 1-2 val
• Atsisiųskite šaltinio failus

Leiskite man nuo pat pradžių būti aiškus: karuselė yra „MacGuffin“; tai siužeto įtaisas; tai aš naudoju norėdamas parodyti, kaip derinti CSS animaciją ir „JavaScript“ - bet tai nėra pratimo esmė. Yra neabejotinai geresnių būdų sukurti tai darančią karuselę, tačiau šie būdai jūsų neišmokys apie animacijos renginius.

Bet kokiu atveju, jei norite sekti paskui arba pažvelgti į paruoštą pavyzdį, visi failai yra palaikymo failuose.

Antkainis

Pagrindinis žymėjimas, kurį naudoju, yra labai paprastas; tai konteinerių skyrius su dviem img elementų vaikais, kurių kiekviena turi unikalią klasę:

1. div>
2. img src = "kačiukas-1.webp">
3. img src = "kačiukas-2.webp">
4. / div>

Valdikliams po karuselės naudoju užsakytą sąrašą su keturiais elementais, kurių kiekviena turi duomenų atributą, kurio vertė yra vieno iš keturių vaizdo failų, kuriuos naudosiu savo pavyzdyje, pavadinimas:

1. ol id = "sukelti">
2. li data-img = "kačiukas-1"> 1 / li>
3. li data-img = "kačiukas-2"> 2 / li>
4. li data-img = "kačiukas-3"> 3 / li>
5. li data-img = "kačiukas-4"> 4 / li>
6. / ol>

Pastebėsite, kad šio žymėjimo nėra HTML faile - vėliau pridėsiu jį su scenarijumi, kad padėčiau grakščiai degraduoti. Šiuose dviejuose žymėjimo blokuose yra visa informacija, kurios man reikės norint sukurti scenarijų, tačiau pirmiausia turėtume juos stilizuoti.

Stiliai

Norėdami pradėti, abu img elementai yra absoliučiai išdėstyti tame pačiame taške jų tėvų viduje ir .img-1 suteikiamas didesnis z indeksas, kad jis pasirodytų priešais .img-2:

1. .turėtojas {pozicija: giminaitis; }
2. .holder img {
3. apačioje: 0;
4. kairėje: 0;
5. pozicija: absoliuti;
6. }
7. img.img-1 {z-indeksas: 8; } img.img-2 {z-indeksas: 7; }

Padaryti img elementai pasirodo sukrauti, .img-2 turi CSS transformaciją, kad šiek tiek sumažintų ir šiek tiek pakeltų aukščiau .img-1. Jai taip pat pritaikytas perėjimas, kurį paaiškinsiu laiku:

1. img.img-2 {
2. transformuoti: skalė (0,96) paversti Y (-3,6%);
3. perėjimas: visi 500 ms palengvinti;
4. }

Trumpas patarimas: nepamirškite tose savybėse naudoti visų atitinkamų pardavėjų priešdėlių.

Galiausiai aš sukursiu pagrindinio kadro animaciją, vadinamą į viršų kad padarys .img-2 paslysti iš paskos .img-1ir žemyn priešais jį:

1. @keyframes upwardown {
2. 50% {transformuoti: skalė (1) versti Y (-120%); }
3. į {
4. transformuoti: nėra;
5. z indeksas: 9;
6. }
7. }

Matote, kad nuo pradinio taško jis judės aukštyn 120% ir atgal, padidindami z indeksą iki 9 kaip tai daro. Sukūrę pagrindinius kadrus, mes juos iškviečiame .img-2, bet tik tada, kai jam taikomas papildomos klasės 1 etapas:

1. img.img-2.stage-1 {animacija: į viršų 1s į priekį; }

Jei pažiūrėsite į stiliaus lapo pavyzdį, netmag.css, pastebėsite daugybę kitų taisyklių, tačiau jos dažniausiai skirtos pristatymui ir nėra tiesiogiai susijusios su šia pamoka. Taigi dabar, kai parašėme žymėjimą ir CSS, eikime toliau ir pažvelkime į „JavaScript“.

Scenarijus

Savo dokumente naudoju tris „JavaScript“ failus:

1. scenarijus src = "jquery-1.7.2.min.js"> / scenarijus>
2. scenarijus src = "modernr.js"> / scenarijus>
3. scenarijus src = "netmag.js"> / scenarijus>

Pirmojo, „jQuery“, man nereikėtų aiškinti. Kitas failas yra pasirinktinis „Modernizr“ sukūrimas, kuris nustato CSS animacijų ir perėjimų palaikymą. Trečiasis failas yra vieta, kur dedu savo scenarijų, ir aš kalbėsiu apie tai.

Pirmasis žingsnis yra inicijuoti „jQuery“ su paruoštas () metodą ir patikrinkite, ar naršyklė gali paleisti šią demonstracinę versiją, naudodama „Modernizr“, kad patikrintų palaikymą:

1. $ (dokumentas) .ready (funkcija () {
2. jei (Modernizr.cssanimations && Modernizr.csstransitions) {
3. // Paleiskite mūsų scenarijų
4. } Kitas {
5. // Daryk ką nors kita
6. });

Kitas dalykas, kurį ketinu padaryti, yra nustatyti kelis kintamuosius: laikiklis yra mūsų konteinerio elemento DOM, .turėtojas, o valdikliai yra visas valdiklių žymėjimas, kurį anksčiau demonstravau mokymo programoje (skyriuje „Žymėjimas“):

1. var savininkas = $ (’. turėtojas’);
2. var kontrolė = ’ol id =" sukelti "> [ir tt] / ol>’;

Po savo kintamųjų aš toliau apibrėžiu tris funkcijas: swapStage1, swapStage2 ir „swapStage3“ - Aš eisiu į kiekvieną iš jų paeiliui. Apibrėžęs visus savo pasaulinius kintamuosius ir funkcijas, įterpiu valdikliai žymėjimas po konteinerio elementu:

1. laikiklis. po (valdikliai);

Tada atėjo laikas nustatyti savo pirmąjį įvykių klausytoją, kuris iškvies šią funkciją swapStage1 spustelėjus bet kurį valdymo sąrašo elementą, nebent jis turi klasę aktyvus taikoma jai:

1. $ (’# Trigger’). On (’click’, ’li: not (.active)’, swapStage1);

Čia yra visa swapStage1 funkcija:

1. funkcija swapStage1 (e) {
2. $ (e.currentTarget) .addClass ('aktyvus'). broliai ir seserys (). removeClass ('aktyvus');
3. var img2data = $ (e.currentTarget) .data (’img’);
4. holder.find (’img.img-2’). attr (’src’, img2data + ’.webp’). addClass (’1-asis etapas’);
5. }

Pirma, tai papildo klasę aktyvus tik spustelėtam sąrašo elementui, kuris įveda paryškinimo stilių, bet dar svarbiau neleidžia jo vėl spustelėti ir sukelti bet kokių scenarijų konfliktų. Tada jis gauna duomenys-img atributo vertę iš spustelėto elemento ir pakeičia href atributas .img-2 naudoti šią naują vertę; tai keičia naudojamą vaizdą. Galiausiai tai papildo klasę 1 etapas į .img-2, ir čia atsiranda mūsų CSS animacijos renginiai.

CSS animacijos renginiai

Kada .img-2 turi klasę 1 etapas pridėta, pradedama vadinama pagrindinio kadro animacija į viršų. Tai, prisiminsite, pakelia elementą į viršų, tada nuleidžia jį priešais .img-1. Kai ši animacija bus baigta, ji suaktyvins įvykį, pavadintą animacijos pabaigair mūsų scenarijuje yra sukurtas įvykių tvarkytojas, kuris klausosi to:

1. holder.on (’animationend’, ’img.img-2.stage-1’, swapStage2);

Iš tikrųjų scenarijus naudoja keturias skirtingas reikšmes įvykių klausytuvuose, nes iki šiol tai įdiegė tik „Firefox“ be priešdėlio:

1. holder.on (’animationend MSAnimationend oanimationend webkitAnimationEnd’, ’img.img-2.stage-1’, swapStage2);

Nepaisant to, tai vadinama funkcija swapStage2 kai animacija į viršų baigtas - taigi iš karto matote, kad tai labai naudingas būdas susieti animacijas.

Į swapStage2 scenarijus keičia elementų klases: .img-1 tampa .img-2 ir atvirkščiai - taip pat pridedama klasė 2 etapas naujai apibrėžtam .img-2. Čia pateikiama visa funkcija:

1. funkcija swapStage2 (e) {
2. var screen1 = laikiklis.find (’img.img-1’);
3. var screen2 = laikiklis.find (’img.img-2’);
4. ekranas1.attr (’klasė’, ’img-2 etapas-2’);
5. screen2.attr (’klasė’, ’img-1’);
6. $ (’# Trigger li.active’). RemoveClass (’pasukti’);
7. }

Tiesiog nepaisykite tos paskutinės taisyklės; Netrukus prieisiu. Tai, kas mus domina, yra klasių mainai - to reikia, nes img elementai pasikeitė pozicija - ir pridėjimas 2 etapas į .img-2. Atminkite, kad sukūrę CSS turėjome pritaikytą perėjimą .img-2, ir kaip .img-1 tampa .img-2 šis perėjimas įvyksta elementui judant į sukrautą padėtį. Kai tai bus baigta, bus paleistas dar vienas įvykis, kuriam mes pasirengėme klausytoją:

1. laikiklis.on (’transitend’, ’img.img-2.stage-2’, swapStage3);

Tai veikia taip pat, kaip animacijos pabaiga, bet apie CSS perėjimą; taigi, kai elementas vėl persikelia į kaminą, perėjimas baigiamas ir įvykis suaktyvinamas, iškviečiant funkciją „swapStage3“. Vėlgi, jūs galite pamatyti, kaip lengva susieti skirtingų tipų CSS animaciją.

The „swapStage3“ funkcija sutvarko: pašalina .img-2 iš DOM ir įterpia po .img-2, atkurdami pradinę DOM tvarką, kad išvengtumėte konfliktų:

1. funkcija swapStage3 (e) {
2. var screen1 = laikiklis.find (’img.img-1’);
3. var screen2 = laikiklis.find (’img.img-2’);
4. ekranas2.removeClass (’2 stadija’). atjunkite ();
5. screen1.after (ekranas2);
6. }

Bet mes dar ne viskas darėme. Mūsų scenarijuje yra dar vienas animacijos renginių klausytojas:

1. laikiklis.on (’animationstart’, ’img.img-2.stage-1’, pasukti);

The animacija pradėti įvykis yra paleistas, kaip jūs tikriausiai galite atspėti, kai į viršų animacija prasideda, o ne tada, kai baigiasi. Mūsų scenarijuje klausytojas naudojamas iškviesti funkciją pasukti, kuris prideda klasę prie aktyvaus valdiklio, kuris suaktyvina pagrindinio kadro taisyklę. Tai sukasi, kol vyksta pagrindinė animacija; jis pašalinamas, kai baigiasi animacija, kaip anksčiau matėme veikiant swapStage2. Šis verpimo efektas yra papildomas prisilietimas ir visai nereikalingas, bet man yra geras būdas pademonstruoti animacija pradėti.

Apibendrinant

Taigi viskas; kaip sakiau pradžioje, esu įsitikinęs, kad yra geresnių būdų, kaip pastatyti rietuvinę šlepetės karuselę, nei ši. Bet tai yra geras CSS animacijos įvykių demonstravimo metodas, kuris yra nepaprastai naudingas sujungiant funkcijų ir animacijų eilutes, kaip aš čia padariau labai paprastai.