javascript - Swapping <div> position causes loss of CSS3 transition effect -
i've got issue seems caused altering position of 2 <divs>
within parent, re-ordering them.
both divs have transition
css rule applied so:
-webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; transition: .2s ease-in-out;
when call swap position:
function swapelements(first, second) { $(first).insertbefore(second); }
the first
element not having transition effect applied browser, doesn't animate @ after having been swapped previous/second element.
this problem i'm listening transition end callback more work within <div>
(initializing gallery):
if (modernizr.csstransitions) { $(roomcolumn).one('transitionend webkittransitionend otransitionend mstransitionend', function () { if (!gallery.hasclass('slick-initialized')) { $(gallery).slick({ lazyload: 'progressive', slidestoshow: 1, slidestoscroll: 1, autoplay: false, dots: false, adaptiveheight: false }); } }); }
because browser isn't doing transition element, event .one('transitionend webkittransitionend otransitionend mstransitionend', function (){});
never fired <div>
, gallery not initialized it.
does have ideas on causing behaviour?
edit: here crude js fiddle. need expand output window 4 columns.
as can see, clicking of first 3 gives animation effect, clicking last <div>
in row, labelled last room
, not cause animation occur.
interestingly, if wrap <div>
swapping code in settimeout
call works fine, seems timing issue, don't want rely on hacky fix though, causes div jump place undesirable.
the problem happens because after swapping, removing original classes (for small box display) , replacing new ones (for larger display). 3 happen within single blocking call. whenever element added, browser need trigger reflow doesn't trigger reflow after each step doing affect performance. so, reflow happens @ end (after execution of removeclass , addclass also) , there element new classes being painted on screen - no state change , no transition also.
to overcome this, need force ua trigger reflow/repaint after swapping before class changes. can done in two ways - 1 force class change statements different function call (anonymous function using settimeout
) , other forcing ua calculate things clientheight
etc (they force repaint because can calculate actual height).
Comments
Post a Comment