Welkom terug.
Dus toen ik in eerste instantie Jay queery introduceerde Ik heb gezegd dat het helpt ons dingen doen, zoals select elementen manipuleren ze op event luisteraars.
En ik heb ook gezegd dat het helpt met effecten en animaties.
Dus in deze video ga ik snel een voorbeeld van een aantal van die ingebouwde effecten te doen in het bijzonder ga ik twee grote categorieën van effecten fading effecten en dia's te laten zien.
Dus ik ben op de Jay Corey dokken hier op de categorie effecten.
Je kunt zien zijn er een flink aantal methoden die te maken hebben met effecten en ik ga om te beginnen door te laten zien van de fade-effecten, dus ik ga om te kijken naar fade out om te beginnen.
Wat fadeout doet is je een element met een dollarteken of een set van elementen te kiezen en noem je dat fade-out op het en het zal dat element animeren van volledige dekking tot aan volledige transparantie of nul ondoorzichtigheid.
Dus het in principe verdwijnt een element uit en je kunt een duur aantoont als je wilt dat het langzaam of snel of zeer traag zijn.
U kunt een aantal milliseconden te bieden.
De standaard is 400 milliseconden en dan kun je een callback te draaien op het einde dat ik zal laten zien in slechts een moment te bieden.
Dus ik ga een nieuw bestand hier te maken om dit effect studie demo laten zien en ik zal gewoon kopiëren over onze structuur van de laatste demo pagina en deze zal J Querrey effecten noemen.
Dus hebben we dat het opzetten en ik ga om zich te ontdoen van al deze content hier en dan ga ik naar toe te voegen in een paar divs.
Laten we drie divs en we gaan deze divs gebruiken en fade ze uit en animeren hen en schuif ze op en neer.
En dus ik ga hen wat inhoud in dit eerste te geven zal deze niet vervagen me de volgende.
Ik smeek je alsjeblieft.
En dan tot slot zullen we er een die Help help help zegt te hebben.
Dus deze divs zijn wanhopig niet weg te worden vervaagd.
Helaas is vandaag de dag is niet hun geluksdag.
En we gaan ze worden uitvechten.
Dus om dit duidelijker ga ik hier toe te voegen aan wat stijl aan ons leven, zodat ze een kleur die we kunnen zien verdwijnen maken.
En ze hebben ook een breedte en hoogte die we kunnen zien schuiven op en neer.
Dus ik ga alle divs te selecteren en geef ze een met 100 pixels en een hoogte van 100 pixels en een kleur achtergrond van wintertaling en laten opslaan en we zullen deze open te stellen.
We hebben drie divs.
Maar ik zou willen dat ze op dezelfde lijn.
Dus een manier om dat te doen is met de vlotter links.
Nu zijn ze allemaal in dezelfde lijn, maar ze bloeden in elkaar.
Dus om te bevestigen dat we een marge toe te voegen.
Dus we gewoon een marge van 20 pixels aan alle kanten.
Nu komen we met drie pleinen en ze hebben elk wat tekst binnen en we echt niet nodig om overboord te gaan styling hen, omdat alles wat we gaan doen is te laten zien hoe we ze in en uit kan passen.
Dus we gaan een knop omhoog top hier toe te voegen en deze knoop zal gewoon zeggen click me.
En als we op deze knop klikt wat er zal gebeuren is dat onze animaties zal lopen.
Dus ik klik op deze en deze drie items moeten fade-out te beginnen.
Dus om te herhalen fade out zal een element te nemen van de volledige dekking of wat dan ook dekking Het is momenteel en vervaagde tot het punt van volledige transparantie.
Dus het lijkt erop dat deze selecte dot fadeout en we kunnen een optionele reeks van de snelheid zo traag of snel te verstrekken of we kunnen het geven van een aantal milliseconden.
Dus laat me je dat nu laten zien.
Ik ben eigenlijk van plan om dit te doen in een apart bestand, dus ik ga een JavaScript-bestand te maken en op te slaan.
Ik bel het van invloed is gewoon geniaal redden kluisje, dat had mijn alert aangesloten en gekoppeld dit samen juist de onderkant.
Voeg gewoon een script tag.
Bron gelijk effect.
Ja.
En als we vernieuwen krijgen we onze aangesloten alert.
Dus wat we hier willen doen is Faid deze divs uit.
Dus moeten we het apparaat, net als dat te selecteren en niet fade-out.
En dan kunnen we een snelheid te bieden of verlaat het enkel als dat.
En als dat is alles wat we willen doen of te vernieuwen en je kunt zien als de pagina wordt geladen ze beginnen te vervagen up.
Dus laten we eigenlijk maken dat gebeuren als we op de knop.
Dus gaan we willen een dollarteken knop dot doen en we kunnen ofwel klikken of ik dot doen op een snelle en vervolgens doorgeven aan onze callback functie.
Dus toen we op zullen dan verdwijnen alle divs net als dat nu wordt vernieuwd en als ik klik je kunt zien dat ze allemaal verdwijnen.
Dus zoals ik al zei kunnen we een aantal hier iets als 1000, die is een volle seconde bieden.
En als ik vernieuw je zult zien wanneer ik op het duurt een volle seconde voor hen om uit te faden.
Een belangrijk punt over fadeout is dat als ik de pagina hier te inspecteren en ik kijk naar de elementen divs zijn nog steeds in het team, hetzij nog in de slaapzaal.
We hebben net zien ze niet omdat hun scherm is ingesteld op none.
Dus het maakt ze niet verwijderen of hen niet van de pagina te verwijderen.
Het is ze gewoon verstopt.
En dat is zeker een belangrijk onderscheid.
Dus laten we zeggen dat ik wilde gewoon een bericht af te drukken zodra de divs had verschoten uit, dus ik zou ze verdwijnen en dan zoiets als dit fade afgerond als het tenietgedaan log doen.
En als ik dit run ik de console te openen en kijken naar de volgorde waarin dingen gebeuren.
Dus als ik klik hier krijg ik Faid voltooid weg te gaan voordat de fade daadwerkelijk wordt gedaan.
Dus wat gebeurt er hier is dat we selecteert u alle divs en we beginnen de fade-out, maar het duurt een volle seconde.
En javascript wacht niet op die tweede te eindigen voordat hij verhuist naar de volgende regel.
Het onmiddellijk verplaatst naar deze lijn en drukt Faid afwerking afgerond en dan is de fade out.
Dus als we willen code gebeurt direct na de fade-out afwerking we willen dat het wordt gegarandeerd te zijn nadat we kunnen passeren in een callback hier.
En dus dit callback zal worden genoemd binnenkant van de fadeout automatisch wanneer het klaar is.
Dus ik ga naar onze constante log daar te verplaatsen en op te slaan.
En als ik verfrissen en nu ik op de fade out afwerking en dan krijgen we 3 Fade voltooid console dot logs voor elk van die.
Een meer voorkomende scenario in plaats van alleen het afdrukken van een string in de Consul is om de elementen daadwerkelijk verwijderen zodra we ze vervagen.
Dus ik zei dat ze alleen verborgen ze niet echt verdwenen.
En als we wilden te verwijderen zoals op onze lijst te doen wij gaan bouwen als we klik op de prullenbak naast een item we willen dat het vervagen langzaam doe een leuke animatie.
Maar dan ook gewoon verwijderen van de pagina volledig uit de DOM.
Dus moeten we een methode genaamd remove gebruiken en we willen alleen maar om het te verwijderen nadat de fadeout is voltooid.
Dus dat ziet er als volgt alleen deze te verwijderen zal doen.
En wat dit zal doen, is wachten totdat de fadeout is voltooid.
En voor elke afd zal de methode verwijderen op het uit te voeren.
Dus vernieuwen en klik op click me.
Ze verdwijnen en dan als we over te gaan naar elementen die je kunt zien dat ons lichaam heeft slechts een knop nu en een tag alle divs zijn volledig verdwenen.
En als ik die lijn uit opmerkingen te maken en te vernieuwen je kunt zien waar ze hier beginnen drie divs en ik klik op de knop en alles wat er gebeurt.
Ze verdwijnen en dan display is ingesteld op none.
Dus als ik mijn code op de verkeerde plaats en ik rende de methode Remove hier beneden deed ik alle divs stip te verwijderen, net als dat.
Wat zou er eigenlijk gebeuren is dat de bestelling niet wordt gegarandeerd.
En dit gaat om een ​​volle seconde duren.
En deze code zal niet wachten tot dat de tweede te eindigen.
Dus het zal beginnen te verdwijnen en vervolgens te verwijderen onmiddellijk na.
Dus die eindigt op zoek als dit waar het begint te vervagen en net onmiddellijk nadat het hen verwijdert.
Het is dus in principe geen fade at all.
Dus dat is waarom J.
Corey levert deze callback, want het is vrij normaal voor ons te willen om iets te doen nadat we iets vervagen of nadat we iets naar beneden schuiven of wat dan ook de animatie is.
Dus dat brengt mij bij mijn volgende punt, dat is dat ik wil een aantal van de andere animaties die we kunnen doen, zodat we ook dingen vervagen te tonen.
Dus als ik het scherm voor niemand in het begin als dit en ik vernieuwen.
We niet de divs zien, omdat nu zijn ze liever verborgen dan ze uitfaden wanneer we op kunnen we ze verdwijnen in en het werkt net zoals je zou verwachten.
Klik op de knop en ze verdwijnen in meer dan een seconde en dan als we willen een stukje code achteraf uit te voeren als we weten dat ze klaar bent met het vervagen in kunnen we een stukje code te zetten en zei dat als de callback hier.
Oké dus dat is Faden.
GK biedt nog een mooie fade methode die heet Faid toggle en Faid toggle werkt op dezelfde manier.
Ik geef een aantal milliseconden en het zal weten of het nodig heeft om iets te vervagen in of uit, afhankelijk van of het nu getoond wordt of niet.
Dus als ik te vernieuwen en ik klik op Fade toggle begint het door hen voeden in en dan vervagen ze allemaal uit en opnieuw in.
Het is eigenlijk net als het toevoegen van een klasse tot de klasse lijst of met behulp van toggle klas met Jay Querrey, waar het enkel beslist of het nodig te vervagen in of fade-out.
Oké dus dat is vervagen de volgende set van effecten die ik wil laten zien zijn deze schuiven effecten.
Dus hier beneden hebben we een glijbaan naar beneden glijbaan toggle en schuif omhoog.
Dus ik zal beginnen met glijbaan naar beneden en wat het doet is het neemt een element dat momenteel niet is te zien in plaats van het animeren van de dekking op een element als Faid doet het eigenlijk bezielt de hoogte van een element.
Dus laat ik je zien hoe dat werkt.
We gaat om dit te veranderen.
Eerder dan vervagen toggle we gewoon naar beneden glijden.
En dat is, want als we vernieuwen onze elementen zijn verborgen.
Dus als ik zonder glijden wanneer we klikken op een knop die u zult zien dat de hoogte is geanimeerd beneden en hetzelfde geldt voor de slide-up.
Het doet het tegenovergestelde.
Dus als ik te ontdoen van het display op, zodat ze worden weergegeven.
En nu heb ik klik op de knop.
Hun hoogte is geanimeerd en ze naar boven schuiven en vervolgens het scherm instellen op None op het einde.
En de andere methode is slide toggle die werkt net als Faid toggle wanneer hij besluit wat te doen.
Dus als ik klik ze schuiven op en nu naar beneden glijden en weer terug omhoog en omlaag.
Dus dat is alles wat er is om af te schuiven op schuif en schuif toggle.
Ze waren net alsof ze Faid analoge methoden.
Er is ook een optionele callback die we kunnen passeren.
Dus als we een duur als 1 seconde en dan kan ik mijn oproep weer binnen te komen.
En ik zal gewoon een andere con. dat log eind dia gedaan.
En dat zal pas afgedrukt nadat de volledige tweede dia is voltooid.
Dus ik vernieuwen.
Laten we eens kijken naar de console en ze op click me en je kunt zien dat alleen gedrukt nadat de dia werd gedaan.
Hetzelfde hier aandacht besteden hier.
Dit verandert in zes.
Daar gaan we.
Maar nogmaals een meer gebruikelijke patroon is om de items te verwijderen zodra we ze hebben uitgeschoven of fade ze uit of wat we hebben gedaan is om ze te verwijderen.
Dus hier zal het een tweede te nemen om hen te glijden en dan zijn ze verwijderd uit de pagina.
En als we naar het tabblad elementen ons lichaam is leeg, behalve voor die knop en het script.
Dus hopelijk geven ze je een goed idee van hoe een aantal van de effecten in een steengroeve werk.
Dit zijn veruit de meest voorkomende fading en glijden.
En we gaan om ze te gebruiken in plaats van ons naar lijst app die we gaan starten in de volgende video te doen.