Pambuyo pa "skewmorphism" ya maola oyambirira a Apple mu Mobile world, Microsoft inatipatsa njira yatsopano yopangira zojambula: tinali mu 2012, tinali titangokumana ndi zomwe zimatchedwa "Flat".
Pambuyo pazaka zingapo ndikukonzanso mautumiki a digito pogwiritsa ntchito mitundu yolimba, mapangidwe oyeretsedwa, mwachidule mwa kuphweka, apa pali Google, ndi malingaliro ake atsopano omwe amasokonezanso malamulo a ergonomics ndi mapangidwe: "Material Design" (http://www.google.com/design/spec/material-design/introduction.html).
Ngati poyang'ana koyamba, zinthu sizikuwoneka kuti sizinasinthidwe kwenikweni kwa wopanga Front-End, makamaka pazojambula ndi tanthawuzo lowapatsa zomwe tiyenera kulimbikira kwambiri.
(http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-visual-continuity)
Kupanga zotulukapo zomwe zimalola kusintha kwamavidiyo kuti afotokoze nkhani kwa alendo paokha kumatengera mfundo imodzi: kutha kuyika makanema ojambula paminthawi yofunika yosankhidwa ndi gulu la digito.
Kwa zaka zingapo tsopano, asakatuli amakono ndi injini zawo zomasulira (nthawi zambiri zochokera pa Webkit) atipatsa zida zaukadaulo zofunika kuti tikwaniritse izi: kuyambitsa zochitika.
Ndipo makamaka chochitika cha transitionEnd chomwe chimawonetsa kutha kwa kusintha kwamphamvu kwa chinthu chimodzi kapena zingapo.

Exemple:

Tiyerekeze kuti tikufuna kupanga chinthu kuti chiwoneke ndikuchitalikitsa tisanachipange kukhala chachikulu.
Ngati makanema ojambula a "classic", ndiko kuti kusintha kwa mayiko, kukhazikitsidwa, zosintha zonse zidzachitika nthawi imodzi. Chinthucho chidzawoneka, kenako chitenge kutalika ndi kutalika mumayendedwe amodzi. Chochitika cha TransitionEnd chimakulolani kuti mudikire kutha kwa kusintha kwamtundu wakale musanayambe chotsatira.
Choncho tikhoza kuganiza motsatizanatsatizana za mayiko, zochitika za kusintha.
:
1. Maphunziro a CSS amafotokozedwa

.initial-state-element-invisible { kusintha: zonse zomasuka 250ms; -webkit-transition: onse omasuka 250ms; -moz-kusintha: zonse zomasuka 250ms; -o-kusintha: zonse zomasuka 250ms; kuwala: 0; kutalika: 100px; } .state-nambala-ziwiri-zimene-zowoneka { opacity: 1; } .state-nambala-zitatu-zapamwamba-element { m'lifupi: 100px; kutalika: 300px; } .state-nambala-zitatu-widest-element { m'lifupi: 300px; kutalika: 300px; }

2. JavaScript (JQuery) pang'ono kuti mumvetsere zoyambitsa zochitika ndikugwiritsa ntchito CSS zatsopano panthawi yoyenera.

$('.state-initial-element-invisible'). dinani(function(){$(this).addClass('state-number-two-element-visible'); $(this).one("transitionend webkittransitionEnd otransitionEnd MStransitionEnd", ntchito(){$(this).addClass('chiwerengero-chiwerengero-chitatu-chapamwamba kwambiri'); $(this).one("transitionend webkittransitionEnd otransitionEnd MStransitionEnd", ntchito(){$(izi) .addClass('chigawo-chiwerengero-chitatu-chachikulu kwambiri'); }); }); });

State 1
Chigawo chathu sichiwoneka
State 2
Chinthu chathu chikuwoneka
State3
Zinthu zathu zikamaliza kuwonekera, zimayamba kukwera ...
State4
…kenako anagona.

Pomaliza

Chitsanzo chosavuta ichi, chomwe chikugwirizana ndi malingaliro a makanema ojambula, chikuwonetsa kuti ndizotheka kuthandiza kumvetsetsa kagwiritsidwe ntchito ka mawonekedwe kudzera mu makanema ojambula pogwiritsa ntchito chochitika cha TransitionEnd.

---