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

recipient-list animation

Browse source
This commit is contained in:
Felix Niklas 2014-08-29 13:23:58 +02:00
parent 8c47a9a6ac
commit a697e80a67
1 changed files with 60 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -463,23 +463,42 @@ class Edit extends App.Controller
arrow = list.find('.list-arrow') arrow = list.find('.list-arrow')
if toggle.hasClass('state--open') if toggle.hasClass('state--open')
toggle.removeClass('state--open') list.velocity
properties:
scale: [ 0, 1 ]
opacity: [ 0, 1 ]
options:
speed: 300
easing: [ 0.34, 1.61, 0.7, 1 ]
complete: -> toggle.removeClass('state--open')
else else
toggle.addClass('state--open') toggle.addClass('state--open')
toggleDimensions = toggle.get(0).getBoundingClientRect() toggleDimensions = toggle.get(0).getBoundingClientRect()
listDimensions = list.get(0).getBoundingClientRect()
availableHeight = toggle.scrollParent().outerHeight() availableHeight = toggle.scrollParent().outerHeight()
top = toggleDimensions.height/2 - listDimensions.height/2 top = toggleDimensions.height/2 - list.height()/2
bottomDistance = availableHeight - padding - (toggleDimensions.top + top + listDimensions.height) bottomDistance = availableHeight - padding - (toggleDimensions.top + top + list.height())
if bottomDistance < 0 if bottomDistance < 0
top += bottomDistance top += bottomDistance
arrow.css('top', -top + toggleDimensions.height/2) arrowCenter = -top + toggleDimensions.height/2
arrow.css('top', arrowCenter)
list.css('top', top) list.css('top', top)
$.Velocity.hook(list, 'transformOriginX', "0")
$.Velocity.hook(list, 'transformOriginY', "#{ arrowCenter }px")
list.velocity
properties:
scale: [ 1, 0 ]
opacity: [ 1, 0 ]
options:
speed: 300
easing: [ 0.34, 1.61, 0.7, 1 ]
change_recipient_type: (e) -> change_recipient_type: (e) ->
$(e.target).addClass('active').siblings('.active').removeClass('active') $(e.target).addClass('active').siblings('.active').removeClass('active')
# store $(this).data('value') # store $(this).data('value')
@ -731,7 +750,7 @@ class ArticleView extends App.Controller
toggle_meta: (e) -> toggle_meta: (e) ->
e.preventDefault() e.preventDefault()
animSpeed = 250 animSpeed = 300
article = $(e.target).closest('.ticket-article-item') article = $(e.target).closest('.ticket-article-item')
metaTopClip = article.find('.article-meta-clip.top') metaTopClip = article.find('.article-meta-clip.top')
metaBottomClip = article.find('.article-meta-clip.bottom') metaBottomClip = article.find('.article-meta-clip.bottom')
@ -746,15 +765,30 @@ class ArticleView extends App.Controller
article.removeClass('state--folde-out') article.removeClass('state--folde-out')
# scroll back up # scroll back up
article.velocity("scroll", article.velocity "scroll",
container: article.scrollParent() container: article.scrollParent()
offset: -article.offset().top - metaTop.outerHeight() offset: -article.offset().top - metaTop.outerHeight()
duration: animSpeed duration: animSpeed
easing: 'easeOutQuad' easing: 'easeOutQuad'
)
metaTop.velocity({ translateY: 0, opacity: 0 }, animSpeed, 'easeOutQuad', -> metaTop.addClass('hide')) metaTop.velocity
metaBottom.velocity({ translateY: -metaBottom.outerHeight(), opacity: 0 }, animSpeed, 'easeOutQuad', -> metaTop.addClass('hide')) properties:
translateY: 0
opacity: [ 0, 1 ]
options:
speed: animSpeed
easing: 'easeOutQuad'
complete: -> metaTop.addClass('hide')
metaBottom.velocity
properties:
translateY: [ -metaBottom.outerHeight(), 0 ]
opacity: [ 0, 1 ]
options:
speed: animSpeed
easing: 'easeOutQuad'
complete: -> metaBottom.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
@ -770,12 +804,22 @@ class ArticleView extends App.Controller
easing: 'easeOutQuad' easing: 'easeOutQuad'
) )
metaTop metaTop.velocity
.velocity({ translateY: metaTop.outerHeight(), opacity: 0 }, 0) properties:
.velocity({ translateY: 0, opacity: 1 }, animSpeed, 'easeOutQuad') translateY: [ 0, metaTop.outerHeight() ]
metaBottom opacity: [ 1, 0 ]
.velocity({ translateY: -metaBottom.outerHeight(), opacity: 0 }, 0) options:
.velocity({ translateY: 0, opacity: 1 }, animSpeed, 'easeOutQuad') speed: animSpeed
easing: 'easeOutQuad'
metaBottom.velocity
properties:
translateY: [ 0, -metaBottom.outerHeight() ]
opacity: [ 1, 0 ]
options:
speed: animSpeed
easing: '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')