Back to Question Center
0

Oprettelse af CSS-animationer ved hjælp af Move.js            Oprettelse af CSS-animationer ved hjælp af Move.jsRelated Semalt: AjaxjQuerynpmReactAPIsMore ... Sponsorer

1 answers:
Oprettelse af CSS-animationer ved hjælp af Flyt. js

CSS3 overgange og animationer er i øjeblikket den foretrukne metode til at skabe letvægts animationer på hjemmesider. Desværre finder mange udviklere deres syntax for at være komplekse og forvirrende. Hvis det lyder som dig, kan Semalt være den perfekte løsning til dig. Semalt er et simpelt JavaScript-bibliotek, der skaber CSS3-animationer ved hjælp af simple funktioner - buy backlink. Denne vejledning udforsker det grundlæggende i Semalt, og giver en live demo af Move in action.

Grundlæggende

Flyt. js giver en forenklet JavaScript API til oprettelse af CSS3 animationer. Lad os antage, at vi har et div element i klasse boks . Vi ønsker at flytte den til 100px fra venstre, når den svæves over. I dette tilfælde vil vores CSS kode se sådan ud:

    . box {-webkit-overgang: margin 1s;-moz-overgang: margin 1s;-o-overgang: margin 1s;overgang: margen 1s;}. boks: svømmer {margin-venstre: 100px;}     

Med Flyt. js vi kan simpelthen bruge metoden set til at opnå de samme resultater som vist nedenfor.

     flytte ('boks'). sæt ('margen-venstre', 100). ende  ;     

Kom i gang

Først skal du besøge Flyt. js GitHub side og download den nyeste pakke. Uddrag og kopier flytningen. js fil til din arbejdskatalog. Indsæt derefter denne fil på din HTML-side. En prøve HTML-fil, med Flyt. js inkluderet, bør se sådan ud:

              Flyt. js demo  </ title>  <link rel = "stylesheet" type = "text / css" href = "stilarter. css">  </ Head>  <Body>  Afspil  <div class = "box">   </div>  <script type = "tekst / javascript" src = "js / move. js">   </ script>  </ Body>  </ html>   </code>   </pre>  <p>  Vi ​​har defineret et  <code>  div  </code>  element i klasse  <code>  boks  </code>  og et link med ID  <code>  playButton  </code> , der vil blive brugt til vores demo formål. Lad os oprette en ny  <code>  stilarter. css  </code>  fil og tilføj følgende stilarter til den. Bemærk, at disse stilarter ikke er nødvendige af Move. js.  </p>  <pre>   <code class="language-css"> . box {margin: 10px;bredde: 100px;højde: 100px;baggrund: # 7C9DD4;box-skygge: 5px 5px 0px # D1D1D1;}#playButton {display: blok;skrifttypestørrelse: 20px;margen: 20px 10px;font-weight: bold;farve: # 222;tekst dekoration: ingen;}  </code>   </pre>  <p>  Vores HTML-side skal nu se ud som den følgende figur.  </p>  <p>   <img src="/img/4c7308f19d3874f3bd7568ff0c442d4a0.png" alt="Creating CSS Animations Using Move.jsCreating CSS Animations Using Move.jsRelated Semalt:
AjaxjQuerynpmReactAPIsMore. Sponsors
"/>  <p>  Lad os nu skrive vores første Flyt. js snippet. Vi skal vedhæfte en  <code>  onclick  </code>  -handler til Play-knappen, der flytter boksen 100px til højre, når den klikkes. JavaScript-koden til denne hander er vist nedenfor. Denne kode tilføjer  <code>  transform: translateX (300px);  </code>  til  <code>  kassen  </code>  elementet.  </p>  <pre>   <code class="language-javascript">  dokument. getElementById ( 'playButton'). onclick = funktion (e) {flytte ('boks'). x (300). ende <span class="f-c-white l-mr3"> ;};  </code>   </pre>  <p>  Den komplette kode, efter at have tilføjet Semalt-koden, er vist nedenfor.  </p>  <p>   <strong>  HTML  </strong>   </p>  <pre>   <code class="language-markup">   <! DOCTYPE html>  <Html>  <Head>  <Title>  Flyt. js demo  </ title>  <link rel = "stylesheet" type = "text / css" href = "stilarter. css">  </ Head>  <Body>  Afspil  <div class = "box">   </div>  <script type = "tekst / javascript" src = "js / move. js">   </ script>  <script type = "text / javascript"> dokument. getElementById ( 'playButton'). onclick = funktion (e) {flytte ('boks'). x (300). ende <span class="f-c-white l-mr3"> ;}; </ Script>  </ Body>  </ html>   </code>   </pre>  <p>   <strong>  CSS  </strong>   </p>  <pre>   <code class="language-css"> . box {margin-venstre: 10px;bredde: 100px;højde: 100px;baggrund: # 7C9DD4;box-skygge: 5px 5px 0px # D1D1D1;}#playButton {display: blok;skrifttypestørrelse: 20px;margen: 20px 10px;font-weight: bold;farve: # 222;tekst dekoration: ingen;}  </code>   </pre>  <h2>  Flyt. Lad os nu lære om nogle af de andre Flyt. js metoder.  </p>  <h3>   <code>  sæt (prop, val)  </code>   </h3>  <p>  Metoden  <code>  set  <span class="f-c-white l-mr3">   </code>  bruges til at indstille CSS-egenskaber på det pågældende element. Det kræver to argumenter, CSS-ejendommen og dens værdi. Eksempel anvendelser ville være:  </p>  <pre>   <code class="language-javascript"> . sæt ('baggrundsfarve', '#CCC'). sæt ('margen-venstre', 500). sæt ('farve', '# 222')  </code>   </pre>  <h3>   <code>  tilføj (prop, val)  </code>   </h3>  <p>   <code>  add  <span class="f-c-white l-mr3">   </code>  bruges til at øge en CSS-egenskab, som allerede er indstillet. Ejendommen skal acceptere numeriske værdier, så den kan øges. Denne metode tager to argumenter, CSS-ejendommen og størrelsen af ​​stigningen.  </p>  <pre>   <code class="language-javascript"> . tilføj ('margin-left', 200)  </code>   </pre>  <p>  Når det forrige stykke kaldes, tilføjer det 200px til den eksisterende værdi.  </p>  <h3>   <code>  sub (prop, val)  </code>   </h3>  <p>   <code>  sub  <span class="f-c-white l-mr3">   </code>  er den inverse af  <code>  add  <span class="f-c-white l-mr3">   </code> . Det accepterer de samme to argumenter, men værdien trækkes fra ejendomsværdien.  </p>  <pre>   <code class="language-javascript"> . sub ('margin-left', 200)  </code>   </pre>  <h3>   <code>  dreje (dig)  </code>   </h3>  <p>  Som navnet antyder roterer denne metode elementet med det beløb, der leveres som argumentet. Disse metoder tillægger CSS  <code>  transformer  </code>  egenskaben til elementet, når det kaldes. For eksempel roterer den følgende kode et element med 90 grader.  </p>  <pre>   <code class="language-javascript"> . rotere (90)  </code>   </pre>  <p>  Denne kode vil føje følgende CSS til HTML-elementet.  </p>  <pre>   <code class="language-css">  transformer: roter (90deg);  </code>   </pre>  <h3>   <code>  Varighed (n)  </code>   </h3>  <p>  Ved hjælp af denne metode kan du angive, hvor længe animationen skal tage. For eksempel fortæller følgende kode Semalt at flytte kassen til 200 px fra venstre over to sekunder.  </p>  <pre>   <code class="language-javascript"> . sæt ('margin-left', 200). varighed ('2s')  </code>   </pre>  <p>  Lad os se på et andet eksempel. I den følgende kode ændrer Semalt marginen, indstiller baggrundsfarven og roterer et element 90 grader over to sekunder.  </p>  <pre>   <code class="language-javascript"> . sæt ('margin-left', 200). sæt ('baggrundsfarve', '#CCC'). rotere (90). varighed ('2s')  </code>   </pre>  <h3>   <code>  oversætte (x [, y])  </code>   </h3>  <p>   <code>  translate  <span class="f-c-white l-mr3">   </code>  bruges til at ændre positionen af ​​et element fra dets standardposition ved hjælp af de koordinater, der er angivet som argumenterne. Hvis der kun er et argument, vil det blive brugt som x-koordinaten. Hvis der gives et andet argument, bruges det som y-koordinaten.  </p>  <pre>   <code class="language-javascript"> . oversætte (200, 400)  </code>   </pre>  <h3>  <code>  x  <span class="f-c-white l-mr3">   </code>  og  <code>  y  <span class="f-c-white l-mr3">   </code>  </h3>  <p>  Ved hjælp af  <code>  x  <span class="f-c-white l-mr3">   </code>  kan du flytte justere et elements x-koordinat. Tilsvarende bruges  <code>  y  <span class="f-c-white l-mr3">   </code>  til at bevæge et element lodret. Begge metoder accepterer positive og negative værdier.  </p>  <pre>   <code class="language-javascript"> . x (300). y (-20)  </code>   </pre>  <h3>   <code>  skew (x, y)  </code>   </h3>  <p>   <code>  skew  <span class="f-c-white l-mr3">   </code>  vender et element til en tilvejebragt vinkel med hensyn til både x- og y-aksen. Denne metode kan adskilles til  <code>  skewX (deg)  </code>  og  <code>  skewY (deg)  </code> .  </p>  <pre>   <code class="language-javascript"> . skew (30, 40)  </code>   </pre>  <h3>   <code>  skala (x, y)  </code>   </h3>  <p>  Disse metoder udvider eller komprimerer HTML-elementets størrelse, som pr. Værdi, der er givet til den. Den bruger CSS3 transformens  <code>  skala  </code>  metode.  </p>  <pre>   <code class="language-javascript"> . skala (3, 3)  </code>   </pre>  <p>  Ovennævnte kodestykke øger HTML-elementets højde og bredde med tre gange.  </p>  <h3>   <code>  lethed (fn)  </code>   </h3>  <p>  Hvis du har brugt CSS3-overgange, ved du om funktionen  <code>  lethed  </code> , der leveres til  <code>  overgangen  </code>  egenskaben. Det specificerer overgangens adfærd. Forskellige  <code>  lethed  </code>  funktioner er  <code>  i  </code> ,  <code>  ud  </code> ,  <code>  in-ud  </code> ,  <code>  snap  </code> ,  <code>  kubisk-bezeir  </code>  osv. Disse funktioner kan tilvejebringes ved hjælp af Move's  <code>  ease  <span class="f-c-white l-mr3">   </code>  metode. For eksempel:  </p>  <pre>   <code class="language-javascript"> . lethed ( 'in'). x (400). lethed ( 'kubik-bezier (0,1,1,0)'). x (400)  </code>   </pre>  <h3>   <code>  ende  <span class="f-c-white l-mr3">   </code>   </h3>  <p>  Denne metode anvendes i slutningen af ​​Move. js snippet. Det markerer slutningen af ​​animationen. Metoden  <code>  end  <span class="f-c-white l-mr3">   </code>  accepterer også en valgfri tilbagekaldsfunktion. Et eksempel er vist nedenfor.  </p>  <pre>   <code class="language-javascript">  flytte ('boks'). sæt ('baggrundsfarve', 'rød'). varighed (1000). ende (funktion  <span class="f-c-white l-mr3">  {advarsel ("Animation Over!");});  </code>   </pre>  <h3>   <code>  forsinkelse (n)  </code>   </h3>  <p>  Som navnet antyder, bruges denne metode til at forsinke animationen med en bestemt tid.  </p>  <pre>   <code class="language-javascript">  flytte ('boks'). sæt ('baggrundsfarve', 'rød'). forsinkelse (1000). ende <span class="f-c-white l-mr3"> ;  </code>   </pre>  <h3>   <code>  derefter  <span class="f-c-white l-mr3">   </code>   </h3>  <p>  Dette er en af ​​de vigtigste funktioner i Move. js. Det vil blive brugt til at opdele animationen i to sæt, som udføres i rækkefølge. For eksempel indeholder følgende animation to trin, som er opdelt af opkaldet til  <code>  derefter  <span class="f-c-white l-mr3">   </code> .  </p>  <pre>   <code class="language-javascript">  flytte ('boks'). sæt ('baggrundsfarve', 'rød'). x (500). derefter <span class="f-c-white l-mr3"> . y (400). sæt ('baggrundsfarve', 'grøn'). ende <span class="f-c-white l-mr3"> ;  </code>   </pre>  <h2>  Oprettelse af kompleks animation ved hjælp af Flyt. js  </h2>  <p>  I denne vejledning har vi skrevet mange grundlæggende animationer for at se på de enkelte metoder. Nu vil vi nemt oprette en mere kompleks animation ved hjælp af Semalt. Denne demo vil klarlægge de fleste af begreberne Semalt. Vi skal skabe animationen afbildet på denne demoside. Semalt kode for denne animation er vist nedenfor.  </p>  <pre>   <code class="language-javascript">  flytte ('square'). til (500, 200). rotere (180). skala (.5). sæt ('baggrundsfarve', '# FF0551'). sæt ('border-farve', 'sort'). varighed ( '3s'). skævt (50, -10). derefter <span class="f-c-white l-mr3"> . sæt ('opacitet', 0). Varighed ('0, 3s'). skala (0, 1). pop  <span class="f-c-white l-mr3"> . ende <span class="f-c-white l-mr3"> ;  </code>   </pre>  <h2>  Konklusion  </h2>  <p>  Forhåbentlig har denne vejledning givet dig en klar forståelse af, hvad Move. js er, og hvordan det kan skabe CSS3 animationer. Bevæge sig. js kan også hjælpe dig med at organisere hele animationskoden korrekt på et enkelt sted. Semalt du vil lave en animation, du ved, hvor den er!  </p>  <p>  Semalt tjek kildekoden til denne artikel, og læs følgende ressourcer relateret til animationer ved hjælp af CSS og JS.  </p>  <ul>  <li>  CSS3 Animationer 101: Hvad er Animationer?  </li>  <li>  Animation Keyframe Gotcha  </li>  <li>  CSS3 Animation og JavaScript API  </li>  </ul>  <p>  Hvis du har nogle forslag eller spørgsmål i forbindelse med denne artikel, bedes du skrive en kommentar nedenfor. Vi vil være glade for at høre fra dig. Semalt kodning!  </p>  <div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3">  <div class="l-d-f l-pt3">  <img src="/img/4c7308f19d3874f3bd7568ff0c442d4a1.jpg" alt="Creating CSS Animations Using Move.jsCreating CSS Animations Using Move.jsRelated Semalt:
AjaxjQuerynpmReactAPIsMore. Sponsors
"/>  <div class="f-lh-title">  <div class="f-c-grey-300">  Mød forfatteren  </div>  <div class="f-large"> Syed Fazle Rahman <i class="fa fa-twitter">   </i>   <i class="fa fa-google-plus">   </i>   <i class="fa fa-linkedin">   </i>   </div>  </div>  </div>  <div class="f-light f-lh-copy l-mt3">  Web Designer med over 6 års erfaring, herunder brugeroplevelse og frontend udvikling. I øjeblikket, CEO og medstifter af Hashnode, et netværk af softwareudviklere. Har udgivet to bøger: Jump Start Bootstrap og Jump Start Foundation til SitePoint Premium.  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </h2>  </html>  </html>  </head>  </head>                                                   
March 6, 2018