Animacija više elemenata odjednom “transition-group”

Posted on 25/06/2018 at 20:26.Written by Dragoljub Živanović

Uvod

group animation

Renderovanje liste se veoma često koristi u programiranju, najčešće je to dinamičko prikazivanje listi kada se renderuje serija slično grupisanih informacija.
U ovom članku je objašnjeno kako animirati takve liste sa Vue.js frameworkom. Za animaciju više elemenata ne možemo koristiti komponentu “transition”, jer ona može da “obavije” SAMO JEDAN HTML element, stoga Vue.js uvodi novi tip wrapper komponente, pod nazivom <transition-group>.
Ova komponenta uz odredjena pravila podržava animiranje više HTML elemenata u okviru jednog tranisition bloka. Potrebno definisati atribut kroz koji se definiše kako će se renderovati wrapper element i jedinstveno obeležiti svaki član liste.

<transition-group name="list">
    <p>Element liste br.1</p>
    <p>Element liste br.2</p>
    <p>Element liste br.3</p>
    <p>Element liste br.4</p>
    <p>Element liste br.5</p>
        ...
</transition-group>

<transition-group name="list">

<p>Element liste br.1</p>

<p>Element liste br.2</p>

<p>Element liste br.3</p>

<p>Element liste br.4</p>

<p>Element liste br.5</p>

...

</transition-group>

Komponenta <transition-group> može da animira pojavljivanje i nestajanje elementa sa već pominjanim CSS klasama koje Vue.js automatski generiše isto kao kod komponente <transition>.

…-enter
…-enter-active
…-enter-to
…-leave
…-leave-active
…-leave-to

Karakteristike “transition-group”

Atribut “key”

Jedna od obavezujućih stvari pri korišćenju komponente <transition-group> je jedinstveno obeležavanje svakog elementa liste, da bi ih Vue.js razlikovao. Stoga je nepohodno svakom elementa liste definisati atribut “key” i dodeliti mu jedinstvenu vrednost.

<transition-group name="list">
    <p key="item1" >Element liste br.1</p>
    <p key="item2" >Element liste br.2</p>
    <p key="item3" >Element liste br.3</p>
    <p key="item4" >Element liste br.4</p>
    <p key="item5" >Element liste br.5</p>
</transition-group>

<transition-group name="list">

<p key="item1" >Element liste br.1</p>

<p key="item2" >Element liste br.2</p>

<p key="item3" >Element liste br.3</p>

<p key="item4" >Element liste br.4</p>

<p key="item5" >Element liste br.5</p>

</transition-group>

Primer

U ovome primeru je animirano nestajanje elementa, korišćenjem klasa koje generiše Vue.js: .remove-list-enter-active, .remove-list-leave-active, .remove-list-enter i .remove-list-leave-to

See the Pen Animacija liste sa “transition-group” – basic by Web programiranje (@chos) on CodePen.

Ovde je animirano samo nestajanje jednog elementa, ali NIJE animirano i zauzimanje upražnjenog mesta. Postoji mogućnost da se i to pomeranje ostatka liste animira, ali to je objašnjeno u sekciji “Animacija promene pozicije elemnata”

Atribut “tag”

Za razliku od komponente <transition> koja se ne renderuje u DOM-u, komponenta <transition-group> se renderuje. Podrazumevano ponašanje wrappera (“transiton-group” tag-a) je da bude renderovan kao <span> element.

transition-group je span tag

Na sreću ovo defaultno ponašanje je moguće promeniti. Da bi izbegli renderovanje “span” elementa, potrebno je da definišemo vrstu elementa koji želimo da bude. Ovo se postiže definisanjem vrednosti za “tag” atribut.

Primer

U ovome primeru se preko “tag” atributa definiše da će komponenta <transition-group> u DOM-u biti renderovana kao “ul” tag:

<transition-group name="list&quot tag="ul" ;>
   // lista elemenata
</transition-group>

<transition-group name="list&quot tag="ul" ;>

// lista elemenata

</transition-group>

Animacija promene pozicije elemnata

Pored “običnog” animiranja sa standardnim Vue.js klasama (…-enter, …-leave…), komponenta <transition-group> može da animira i promenu u položaja elementa (ubacivanje i izbacivanje elementa iz liste…). Ova funkcionalnost se dobija definisanjem svojstava za animaciju kroz novu CSS klasu, pod imenom …-move. Ovu CSS klasu u pozadini generiše Vue.js samo za ovu namenu, da bi se kroz nju definisala animacija elemenata liste koji menjaju iz nekog razloga svoje pozicije. Kao i kod drugih klasa koje generiše Vue.js i kod ove će se prefiks podudarati sa vrednosti atributa “name“.

.nameTransitionElemnta-move{
    ...         // npr. transition: all 1s;
}

.nameTransitionElemnta-move{

... // npr. transition: all 1s;

}

NAPOMENA:
Animacija definisana na ovaj način neće raditi ukoliko elementi imaju setovanu vrednost CSS svojstva display: inline

Ovo je sasvim dovoljno za animiranje kretanja elementa koji menja mesto u listi ili se ubacuje u listu, medjutim ne i za animaciju kretanja pri izbacivanju elementa sa liste. Razlog je što element koji nestaje zbog svoje animacije koja traje ne oslobadja mesto drugim elementima liste. Stoga dok god taj elemenat potpuno ne nestane animacija ne može biti izvršena.
Rešenje za ovo je da u momentu dok je aktivna klasa …-leave-active definišemo vrednost position svojstva kao “absolute”.

....-leave-active {
  transition: all 1s;
  position:absolute;
}

....-leave-active {

transition: all 1s;

position:absolute;

}

Primer

U ovome primeru elementi menjaju poziciju i to kretanje je animirano iskorišćavanjem CSS klase koju generiše Vue.js pod naziovom .flip-list-move:

See the Pen Animacija liste sa “transition-group” by Web programiranje (@chos) on CodePen.

Primer

U ovome primeru je iskorišćena klasa koju generiše Vue.js .remove-list-move, gde je kroz nju definisana animacija pomeranja elemenata (paralelno sa animacijom nestajanja elementa). Ovo pomeranje je omogućeno definisanjem position svojstva “absolute” odmah nakon što je animacija nestajanja započeta kroz klasu .remove-list-leave-active, jer je na taj način oslobadjen prostor gde se nalazi element koju nestaje i pre nego što potpuno nestane.

See the Pen Animacija liste sa “transition-group” – remove item by Web programiranje (@chos) on CodePen.

Tranzicija pri zameni elemenata sa Vue.js

Posted on 24/06/2018 at 20:22.Written by Dragoljub Živanović

Tranzicija pri zameni elemenata različitog tipa

Tranzicija koja se dešava pri zameni dva elementa različitog tipa je veoma jedanostavna, dovoljno je da se oba elementa obaviju sa transition elementom.

Primer

See the Pen Osnovna tranzicija izmedju elemenata by Web programiranje (@chos) on CodePen.

Transition Modes

vue

Pri tranziciji u prethodnom primeru se promena svojstva na oba elementa dešava istovremeno. Usled čega su oba elementa vidljiva za vreme animacije (što nije baš najlepše). Novi element koji tek treba da se prikaže je uvek pozicioniran ispod elementa koji nestaje. Neprirodno je to što taj elemenat dolazi na pravo mesto tek kada prvi element skroz nestane tj. kada se završi animacija (pa se tada primeti skok elementa).
Da bi se izbeglo ovakvo ružno ponašanje potrebno je da elemenat koji nestaje potpuno završi animaciju, pre nego što počne animacija elementa koji se pojavljuje. Vue.js ovo postiže definisanjem tzv. moda tranzicije.
Postoje dve mogućnosti za vrednost atributa “mode”:

out-in – trenutno vidljivi element prvi izvodi animaciju, pa tek po završetku te animacije započinje animacija novog elementa. Ovaj mod se koristi u većini slučajeva!
in-out – Prvo animaciju izvodi novi element, pa tek po završetku te animacije započinje animacija postojećeg elementa.

Stoga je dovoljno definisati vrednost atributa mode sa jednom od dve ponudjene vrednosti.

Primer

U ovome primeru je transiton elementu dodat atribut mode="out-in"

See the Pen Mod tranzicije izmedju elemenata by Web programiranje (@chos) on CodePen.

Tranzicija pri zameni elemenata istog tipa

Ukoliko se smenjuju dva elementa različitog tip (npr. “p” i “div”) tranzicija će se izvršiti, medjutim ako se smenjuju elementi istog tipa potrebno je dodati atribut “key” sa različitim vrednostima za svaki element da bi ih Vue.js razlikovao!

<transition>
  <button v-if="isEditing" key="save">
    Sačuvaj
  </button>
  <button v-else key="edit">
    Edituj
  </button>
</transition>

Sačuvaj

</button>

Edituj

</button>

</transition>

Zbog ovoga možemo izbaciti v-if i uraditi tranziciju izmedju dva stanja atributa “key”:

<transition>
  <button v-bind:key="isEditing">
    {{ isEditing ? 'Sačuvaj' : 'Edituj' }}
  </button>
</transition>

</button>

</transition>

Tranzicija izmedju komponenti

Tranzicija izmedju komponenti je čak jednostavnija od obične tranzicije izmedju istih elemenata jer ne zahteva atribut “key”:

HTML

<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>

</transition>

JavaScript

new Vue({
  el: '#transition-components-demo',
  data: {
    view: 'v-a'
  },
  components: {
    'v-a': {
      template: '<div>Component A</div>'``
    },
    'v-b': {
      template: '<div>Component B</div>'
    }
  }
})

new Vue({

el: '#transition-components-demo',

data: {

view: 'v-a'

components: {

'v-a': {

template: '<div>Component A</div>'``

'v-b': {

template: '<div>Component B</div>'

}

})

Animacija sa CSS svojstvom “transition”

Posted on 04/06/2018 at 09:33.Written by Dragoljub Živanović

Svojstva

CSS Transitions (srp. tranzicija) je najjednostavniji način animacije sa CSS-om. Tranzicija se koristi da ublaži naglu promenu vrednosti izabranog CSS svojstva u određenom vremenskom periodu, tako što postepeno menja vrednosti CSS svojstva. Ovaj mehanizam pokrivaju četri svojstva:

css tranzicija

transition-property (obavezno)

Definiše na kome CSS svojstvu će biti izvršena tranzicija. Spisak svih svojstava na kojima može da se izvrši tranzicija možete pogledati na “www.w3.org”
transition-duration (obavezno)

Definiše trajanje tranzicije
transition-timing-function (opciono)

Definiše funkciju koja će biti zadužena za brzinu tranzicije u vremenu.
- linear – predefinisana tranzicija sa konstntnom brzinom
- ease – predefinisana tranzicija koja ubrzava kroz sredinu pa usporava na kraju
- ease-in – predefinisana tranzicija koja počinje sporo pa zatim ubrzava sve do kraja
- ease-out – predefinisana tranzicija koja počinje velikom brzinom a zatim usporava do kraja
- ease-in-out – predefinisana tranzicija koja počinje sporo, nakon čega ubrzava u sredini a zatim usporava do kraja
- cubic-bezier(x1,y1,x2,y2) – programer sam definiše ponašanje funkcije. Pomoć za definisanje “cubic-bezier()” funkcije možete potražiti na sajtu cubic-bezier.com ili easings.net/
transition-delay (opciono)

Definiše vreme nakon kojeg će početi tranzicija od trenutka aktiviranja tranzicije

Primer

.selector {
     transition-property: cssSvojstvoKojeSeMenja;
     transition-duration: trajanjeAnimacije;
     transition-timing-function: timing-function;
     transition-delay: velicinaOdlaganjaAnimacije;
}

.selector {

transition-property: cssSvojstvoKojeSeMenja;

transition-duration: trajanjeAnimacije;

transition-timing-function: timing-function;

transition-delay: velicinaOdlaganjaAnimacije;

}

Skraćena sintaksa “transiton”

Medjutim najčešće se koristi svojstvo pod nazivom samo “transition” koje je obuhvata sva četri prethodno pomenuta svojstva:

.selector {
     transition: [property] [duration] [timing-function] [delay];
}

.selector {

transition: [property] [duration] [timing-function] [delay];

}

Pokretanje tranzicije

“Okidanje” dogadjaja koji aktivira promenu svojstva, a samim tim i tranziciju ako je definisana u svojstvu može biti izvršeno:

pseudo klasama
- :hover – kada mišem predjemo preko elementa
- :focus – kada je element u fokusu
- :active – kada je link element aktivan tj. kliknut
menjanjem svojstva ili dodavanje klase koja sadrži promenu svojstva sa JavaScriptom

Primeri

Primer – osnovna tranzicija

U ovome primeru se nad desnim elementom izvršava tranzicija usled hover-a jer se tada menja vrednost svojstava “width” i “heigh”.

See the Pen QrXoEj by Web programiranje (@chos) on CodePen.

Primer – transition-timing-function

See the Pen KRjBwV by Web programiranje (@chos) on CodePen.

Primer – transition-delay

See the Pen delay transition by Web programiranje (@chos) on CodePen.

Primer

See the Pen Transitional Button by Web programiranje (@chos) on CodePen.

Uvod u animaciju sa CSS-om

Posted on 30/05/2018 at 10:42.Written by Dragoljub Živanović

Kako se izvodi animacija sa CSS-om

animacija sa css-om

Animacija pokretana iz CSS je nastala kao potreba front-end programera da imaju mogućnost definisanja ove interakcije bez upotrebe JavaScript-a ili eventualno zastarelog Flash-a. Dva glavna svojstva omogućavaju animaciju iz CSS-a:

transition
animation

Svojstvo “transitions” (srp. tranzicija) je najjednostavniji način animacije sa CSS-om. Tranzicija se koristi da ublaži naglu promenu vrednosti izabranog CSS svojstva u određenom vremenskom periodu, tako što postepeno menja vrednosti CSS svojstva.
Svojstvo “animation” se takodje zasniva na promeni svojstva nekog elementa u toku vremena ali dozvoljava malo bolju kontrolu i ima dodatne druge specifičnosti.

Koja svojstva animirati?

Ne mogu sva CSS svojstava biti animirana, ali većina ipak može, spisak svih svojstva koja mogu biti animirana možete pogledati ovde. Pošto animiranje zna da bude zahtevan proces kada su u pitanju resursi, potrebno je obratiti dodatnu pažnu na zahtevnost animacije. CSS animacije nisu automatski ubrzane sa GPU, međutim, neki browseri obezbeđuju hardversko ubrzanje određenih osobina kako bi pružile bolje performanse pri renderingu. Hardversko ubrzanje (eng. Hardware acceleration) znači da će ” Graphics Processing Unit” (GPU) pomoći u renderovanju stranice tako što će obavljati neke od težih zadataka, umesto “Central Processing Unit-a” (CPU-a). Stoga ako su resursi ograničeni trebali bi izbegavati svojstva koja ne podržavaju hardware acceleration. Danas su svojstva “transform” i “opacity” u prednosti kada je u pitanju animacija, jer im GPU pomaže pri izršavanju, pa ih treba koristi kad god je to moguće:

opacity
transform: translate()
transform: rotate()
transform: scale()

Za razliku od pomenutih svojstva, u “skupa” svojstva pripadaju sva koja menjaju geometriju stranice (layout), jer ako menjate jedan element, često je potrebno da browser ponovo preračuna geometriju svih drugih elemenata. Takodje menjanje boje pripada grupi “skupih” operacija.

NAPOMENA:
U želji da se poboljša iskorišćavanje resursa i optimizujeu animacija je uvedeno novo CSS svojstvo “will-change”. Svojstvo “will-change”, nam omogućava da unapred obavestimo browser o tome koje vrste promena ćemo verovatno napraviti, tako da se browser može na vreme pripremiti i aktivirati odgovarajuće optimizacije pre nego što dodje do same animacije. Više o ovome svojstvu pročitajte na MDN-u u članku “will-change”.

Razlike izmedju “transition” i “animation”

@keyframes

U svojstvu “transition” se animacija izvršava samo na osnovu početnih i krajnjih vrednosti nekog CSS svojstva, dok kod svojstva “animation” imamo mogućnost da kroz @keyframe definišemo neograničen broj medjuvrednosti.

Pokretanje animacije

Druga bitna razlika između svojstva “animation” i “transitions” može se videti u načinu na koji se započinje animacija. Svojstvo “transition” izvodi animaciju samo kao reakciju na promenu CSS svojstva koje se prati (npr. kada sa hover-om na element promenimo vrednost nekog svojstva). Dok animacije sa svojstvom “animation” ne zahtevaju eksplicitno aktiviranje (iako je naravno i takav način moguć), te one mogu automatski započeti reprodukciju odmah po učitavanju.

Looping

Svojstvo “transition” može da se pokrene samo jednom (za iste vrednosti), dok s druge strane svojstvo “animation” može da definiše koliko puta želimo da se izvrši ista animacija (ukjučujući i infinite).

Odloženo pokretanje

Svojstvo “animation” za razliku od “transition” može da odloži pokretanje animacije.

Interakcija sa JavaScript-om

Kada želimo tzv. hibridni pristup u kojem se animacija primarno definiše u CSS-u, ali se iz JavaScirpt-a manipuliše određenim aspektima animacije, tada je uvek bolje koristiti svojstvo “transition”. Korišćenje svojstva “animation sa JavaScriptom je takodje moguće, ali je iz JavaScript-a komplikovano modifikovanje @keyframes svojstva.

Zaključak:

Moj pristup izboru svojstva se svodi na sledeće dileme:

Ako je animacija jednostavna i bez “lupovanja”, onda koristim svojstvo “transitions”.
Ako je animacija komplikovana ili ima “lupovanje”, onda koristim svojstvo “animations”.
Ako želim da manipulišem vrednostima svojstava koristeći JavaScript, onda koristim svojstvo “transition”.

BONUS: svojstvo “transform”

Transform svojstvo ne vrši nikakvu animaciju, ali se često koristi uz prethodno pomenuta CSS svojstva koja su zadužena za animaciju (transition/animation). U stvari animacije ili tranzicije nakon promene vrednosti “transform” svojstva mogu biti veoma interesante i upečatljive.

Svojstvo “transform” u zavisnosti od njegove vrednosti nam omogućava da HTML element:

transliramo duž osa

transform: translate(12px, 50%); transform: translateX(2em); transform: translateY(3in); transform: translate3d(x, y, z)

1
2
3
4

transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: translate3d(x, y, z)
rotiramo

transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: rotate3d(x, y, z);

1
2
3
4

transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: rotate3d(x, y, z);
skaliramo po veličini

transform: scale(2, 0.5); transform: scaleX(2); transform: scaleY(0.5); transform: scale3d(sx, sy, sz)

1
2
3
4

transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scale3d(sx, sy, sz)
iskosimo

transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad);

1
2
3

transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
dodamo perspektiu

transform: perspective(17px);

1

transform: perspective(17px);

Transform svojstvo sa ovako definisanom vrednosti (“perspective”) ne utiče na sam element, ali utiče na 3D transformacije potomaka, tako da im omogućava perspektivu dubine.

NAPOMENA:
Dozvoljeno je kombinovanje više vrednosti u sklopu jednog transform svojstva npr.

transform: translateX(10px) rotate(10deg) translateY(5px);

1	transform: translateX(10px) rotate(10deg) translateY(5px);

Za kombinaciju više svojstava u jedno zajedničko možemo da koristimo i svojstvo “matrix”. Ovo svojstvo ne piše programer već se generiše dodatnim aplikacijama. Pogledajte online sajt za generisanje matrix vrednosti “https://meyerweb.com/eric/tools/matrix, u kome aplikacija prihvata kao korisnički unos kombinaciju “običnih” pojedinačnih svojstava, a vraća vrednosti matriks svojstva.

Primer

rotate(45deg) translate(24px, 25px)

1	rotate(45deg) translate(24px, 25px)

prelazi u:

matrix(0.707107, 0.707107, -0.707107, 0.707107, -0.707107, 34.6482)

1	matrix(0.707107, 0.707107, -0.707107, 0.707107, -0.707107, 34.6482)

Primer

See the Pen Css3 Transform by Web programiranje (@chos) on CodePen.

Uvod

Karakteristike “transition-group”

Atribut “key”

Primer

Atribut “tag”

Primer

Animacija promene pozicije elemnata

Primer

Primer

Tranzicija pri zameni elemenata različitog tipa

Primer

Transition Modes

Primer

Tranzicija pri zameni elemenata istog tipa

Tranzicija izmedju komponenti

HTML

JavaScript

Svojstva

transition-property (obavezno)

transition-duration (obavezno)

transition-timing-function (opciono)

transition-delay (opciono)

Primer

Skraćena sintaksa “transiton”

Pokretanje tranzicije

Primeri

Primer – osnovna tranzicija

Primer – transition-timing-function

Primer – transition-delay

Primer

Kako se izvodi animacija sa CSS-om

Koja svojstva animirati?

Razlike izmedju “transition” i “animation”

@keyframes

Pokretanje animacije

Looping

Odloženo pokretanje

Interakcija sa JavaScript-om

Zaključak:

BONUS: svojstvo “transform”

transliramo duž osa

rotiramo

skaliramo po veličini

iskosimo

dodamo perspektiu

Primer

Primer