Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

improve animation performance

Browse source 
the reason for a bad animation performance might not have been the scroll animation capabilities of velocity.js but that I forgot to use the hardware accelerated 'translateY' instead of 'top' for the animation.
This commit is contained in:
Felix Niklas 2014-08-28 18:08:23 +02:00
parent 4e1ce2425c
commit 8c47a9a6ac
1 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
View file

@ -753,8 +753,8 @@ class ArticleView extends App.Controller
easing: 'easeOutQuad' easing: 'easeOutQuad'
) )
metaTop.velocity({ top: 0, opacity: 0 }, animSpeed, 'easeOutQuad', -> metaTop.addClass('hide')) metaTop.velocity({ translateY: 0, opacity: 0 }, animSpeed, 'easeOutQuad', -> metaTop.addClass('hide'))
metaBottom.velocity({ top: -metaBottom.outerHeight(), opacity: 0 }, animSpeed, 'easeOutQuad', -> metaTop.addClass('hide')) metaBottom.velocity({ translateY: -metaBottom.outerHeight(), opacity: 0 }, animSpeed, 'easeOutQuad', -> metaTop.addClass('hide'))
metaTopClip.velocity({ height: 0 }, animSpeed, 'easeOutQuad') metaTopClip.velocity({ height: 0 }, animSpeed, 'easeOutQuad')
metaBottomClip.velocity({ height: 0 }, animSpeed, 'easeOutQuad') metaBottomClip.velocity({ height: 0 }, animSpeed, 'easeOutQuad')
else else
@ -771,11 +771,11 @@ class ArticleView extends App.Controller
) )
metaTop metaTop
.velocity({ top: metaTop.outerHeight(), opacity: 0 }, 0) .velocity({ translateY: metaTop.outerHeight(), opacity: 0 }, 0)
.velocity({ top: 0, opacity: 1 }, animSpeed, 'easeOutQuad') .velocity({ translateY: 0, opacity: 1 }, animSpeed, 'easeOutQuad')
metaBottom metaBottom
.velocity({ top: -metaBottom.outerHeight(), opacity: 0 }, 0) .velocity({ translateY: -metaBottom.outerHeight(), opacity: 0 }, 0)
.velocity({ top: 0, opacity: 1 }, animSpeed, 'easeOutQuad') .velocity({ translateY: 0, opacity: 1 }, animSpeed, 'easeOutQuad')
metaTopClip.velocity({ height: metaTop.outerHeight() }, animSpeed, 'easeOutQuad') metaTopClip.velocity({ height: metaTop.outerHeight() }, animSpeed, 'easeOutQuad')
metaBottomClip.velocity({ height: metaBottom.outerHeight() }, animSpeed, 'easeOutQuad') metaBottomClip.velocity({ height: metaBottom.outerHeight() }, animSpeed, 'easeOutQuad')