iphone - WebKit CSS transformations and animations in Javascript -

-

i'm working on iphone web application. starded playing webkit-transform , webkit-animation css rules. i've questions: example, there real advantage in using these instead of, say, jquery.animate(...)? resulting animations don't seem accelerated , fast. let's explain better: i've series of images have move on screen, gallery... set each image css rules this:

-webkit-transition-property: left, top, right, bottom, width; -webkit-transition-duration: 200ms;

then change style.left , style.top of each element want move new coordinates. result not fast expected. fast more or less jquery (not fluid @ all). i've seen there -webkit-animation , -webkit-transform still don't understand how use them properly. first 1 lets me move things around, doesn't generate animation, use following code:

var trans = "translate(" + x + "px," + y + "px)"; element.style.webkittransform = trans;

with element moves around, without animation. if create dynamically animation with:

var lastsheet = document.stylesheets[document.stylesheets.length - 1]; lastsheet.insertrule("@-webkit-keyframes "+ "animx" + "{ { top: "+oy+"px; left:"+ox+"px;} {top: " + y + "px; left: " + x + "px; } }",lastsheet.cssrules.length); element.style.webkitanimationname = "animx";

this way element move once, not fludly, , it's old position. repeating code doesn't lead anything.

what think, there real advantage in terms of fluidity of movement in using those? , if yes, how use them properly?

something should want, , runs quite smoothly in safari on iphone 4:

<style type='text/css'>      #element {          position: absolute;         top: 0px;         left: 0px;         -webkit-transition-property: top, left, bottom, right;         -webkit-transition-duration: 300ms;         -webkit-transition-timing-function: ease-in;      }  </style>  <script type='text/javascript'>      document.queryselector('#element').style.left = '300px';  </script>

Comments

Post a Comment

Popular posts from this blog

c++ - How do I get a multi line tooltip in MFC -

-
right now, have tool tip pops when hover on edit box. problem tool tip contains multiple error messages , in 1 long line. need have each error message on own line. error messages contained in cstring new line seperating them. my existing code below. bool ontooltiptext(uint, nmhdr* pnmhdr, lresult* presult) { assert(pnmhdr->code == ttn_needtexta || pnmhdr->code == ttn_needtextw); // need handle both ansi , unicode versions of message tooltiptexta* pttta = (tooltiptexta*)pnmhdr; tooltiptextw* ptttw = (tooltiptextw*)pnmhdr; // tchar szfulltext[256]; cstring strtiptext=_t(""); uint nid = pnmhdr->idfrom; if (pnmhdr->code == ttn_needtexta && (pttta->uflags & ttf_idishwnd) || pnmhdr->code == ttn_needtextw && (ptttw->uflags & ttf_idishwnd)) { // idfrom hwnd of tool nid = ::getdlgctrlid((hwnd)nid); } //m_errprojaccel[ch] contains 1 or more error messages each...
Read more

asp.net - In javascript how to find the height and width -

-
i having .aspx , masterpage page. in masterpage loading aspx page . in aspx page design using generating table structure using code-behind server in javascript how find height , width . regards, kumar if you're looking table height , width, should it var tbl = document.getelementbyid('tbldemo'); alert(tbl.offsetwidth + '\n' + tbl.offsetheight);
Read more

c# - DataTable to EnumerableRowCollection -

-
i have datatable according client requirement can contain invalid date "00/00/1999",null,empty string.(typed datset) when collect them enumerables wish convert of invalid forms empty string. (i.e) enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || (how check date invalid date) ? string.empty : order.field<datetime>("orderdate") } how check whether date valid date or not? datetime.tryparse...like given current code: datetime date; enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || !datetime.tryparse(convert.tostring(order.field<datetime...
Read more