javascript - CSS3 Smooth transition when dynamically changing animations -

-

i have 2 keyframe animations "bounce-in" , "bounce-out" bounce-in animation takes 1.2 seconds complete, if user triggers bounce-out function before it's finished jump 100% scale , doesn't gracefully scale out it's current animation position.

is possible keyframe animations? i've seen done transition property not using scale().

@-webkit-keyframes bounce-in  { 0% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } 60% { -webkit-transform: scale(0.7) } 80% { -webkit-transform: scale(1.0) } 90% { -webkit-transform: scale(0.9) } 100% { -webkit-transform: scale(1.0) } }  @-webkit-keyframes bounce-out  { 0% { -webkit-transform: scale(1.0) } 40% { -webkit-transform: scale(0.1) } 60% { -webkit-transform: scale(0.4) } 80% { -webkit-transform: scale(0.1) } 90% { -webkit-transform: scale(0.2) } 100% { -webkit-transform: scale(0) } }

i have demo on jsfiddle: http://jsfiddle.net/vn3bm/98/ *if click "games" circle before animation finished notice other 2 jump 100% , animate out (that's i'm trying make smooth).

i tried removing 0% keyframe bounce-out , didn't help...

in case, "jump" notice in animation comes change of animations have installed on onmouseup. "bounce-out" animation has initial scale of 1 (first keyframe), , 2 circles set when animation installed.

there 2 solutions this, can explain in detail:


the easy way

you wait initial animation end via 'webkitanimationend' event , install onmouseup event recursive function waiting animation finish:

var initanimationended = false; document.getelementbyid('sports').addeventlistener('webkitanimationend', function() {  initanimationended = true; }, false);​

and here's onmouseup handler:

document.getelementbyid('games').onmouseup = function() {   function bounceout() {     if (initanimationended) {         events.style.webkitanimationname = "bounce-out";         sports.style.webkitanimationdelay = "0.2s";         sports.style.webkitanimationname = "bounce-out";     } else {         settimeout(bounceout, 20);     }   }   bounceout(); }


installed jsfiddle here can see working. bounce out animation triggered after animation finished, nothing unusual that.


the hard way

you can pause animation , parse current values of transformation, install temporary keyframe animation bounce out. gets more verbose though:

first, have stop animations:

events.style.webkitanimationplaystate = "paused"; sports.style.webkitanimationplaystate = "paused";

then, set helper insert new css rules:

var addcssrule = function(rule) {   var style = document.createelement('style');   style.innerhtml = rule;   document.head.appendchild(style); }

then create css keyframe rules on fly , insert them:

    // current transform scale of sports , events      function getcurrentscalevalue(elem) {       return document.defaultview.       getcomputedstyle(elem, null).       getpropertyvalue('-webkit-transform').       match(/matrix\(([\d.]+)/)[1];     }      var currentsportsscale = getcurrentscalevalue(sports);     var currenteventsscale = getcurrentscalevalue(events);       // set first string keyframes rule      var sportstempanimation = ['@-webkit-keyframes sports-temp-bounce-out {'];     var eventstempanimation = ['@-webkit-keyframes events-temp-bounce-out {'];       // basic bounce out animation      var bounceoutanimationbase = {         '0%': 1,         '40%': 0.1,         '60%': 0.4,         '80%': 0.1,         '90%': 0.2,         '100%': 0     };       // scale animation current values      (prop in bounceoutanimationbase) {         sportstempanimation.push([           prop, '            { -webkit-transform: scale(',            currentsportsscale * bounceoutanimationbase[prop],            ') } '].join(''));         eventstempanimation.push([            prop,             ' { -webkit-transform: scale(',             currenteventsscale * bounceoutanimationbase[prop],             ') } '          ].join(''));     }       // add closing brackets      sportstempanimation.push('}');     eventstempanimation.push('}');       // add animations rules      addcssrule([sportstempanimation.join(''),                  eventstempanimation.join('')].join(' '));

then, restart animations these rules:

    events.style.webkitanimationname = "events-temp-bounce-out";     events.style.webkitanimationdelay = "0s";     sports.style.webkitanimationdelay = "0s";     sports.style.webkitanimationname = "sports-temp-bounce-out";     events.style.webkitanimationplaystate = "running";     sports.style.webkitanimationplaystate = "running";


et voilà. made jsfiddle here can play around it.


more sugar

  • in example, circles bounce out alternating in bounce. can work second solution using settimeout sports circle animations. did not want include here because unnecessarily complicate example code.

  • i know provided examples not dry, example make stuff events , sports work half lines of code (with meta properties), in terms of readability, think example serves well.

  • to have example working in browsers support css3 animations, need normalize transition properties. in javascript, have here example works animations , other properties well, replace 'transition' property want

  • for further read on modifying css3 animations on fly, found this post useful, have @ well.


Comments

Post a Comment

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

-
i trying reposotries using c# code process svncommand = null; var psi = new processstartinfo("svnadmin"); psi.redirectstandardoutput = true; psi.redirectstandarderror = true; psi.useshellexecute = false; psi.arguments= @"dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump"; using (svncommand = process.start(psi)) { var myoutput = svncommand.standardoutput; var myerror = svncommand.standarderror; debug.write("output :" + environment.newline + environment.newline + myoutput.readtoend() + environment.newline + "error :" + environment.newline + environment.newline + myerror.readtoend()); svncommand.close(); } when use dump command commandline svnadmin dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump it works fine when try ...
Read more

c# - Copy ObservableCollection to another ObservableCollection -

-
how copy observablecollection item observablecollection without reference of first collection? here observablecollection item value changes affecting both collections. code private observablecollection<ratemodel> _allmetalrate = new observablecollection<ratemodel>(); private observablecollection<ratemodel> _metalrateondate = new observablecollection<ratemodel>(); public observablecollection<ratemodel> allmetalrate { { return this._allmetalrate; } set { this._allmetalrate = value; notifypropertychanged("metalrate"); } } public observablecollection<ratemodel> metalrateondate { { return this._metalrateondate; } set { this._metalrateondate = value; notifypropertychanged("metalrateondate"); } } foreach (var item in metalrateondate) allmetalrate.add(item); what causing , how can solve it? you need clone object referenced item before it's a...
Read more

All overlapping substrings matching a java regex -

-
is there api method returns (possibly overlapping) substrings match regular expression? for example, have text string: string t = 04/31 412-555-1235; , , have pattern: pattern p = new pattern("\\d\\d+"); matches strings of 2 or more characters. the matches are: 04, 31, 412, 555, 1235. how overlapping matches? i want code return: 04, 31, 41, 412, 12, 55, 555, 55, 12, 123, 1235, 23, 235, 35. theoretically should possible -- there obvious o(n^2) algorithm enumerates , checks substrings against pattern. edit rather enumerating substrings, safer use region(int start, int end) method in matcher . checking pattern against separate, extracted substring might change result of match (e.g. if there non-capturing group or word boundary check @ start/end of pattern). edit 2 actually, it's unclear whether region() expect zero-width matches. specification vague, , experiments yield disappointing results. for example: string line = "xx90xx"; strin...
Read more