snappier recipient animation

This commit is contained in:
Felix Niklas 2014-08-29 15:01:38 +02:00
parent a697e80a67
commit e46c7b1ac7
3 changed files with 6 additions and 4 deletions

View file

@ -463,16 +463,18 @@ 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 list.velocity
properties: properties:
scale: [ 0, 1 ] scale: [ 0, 1 ]
opacity: [ 0, 1 ] opacity: [ 0, 1 ]
options: options:
speed: 300 speed: 300
easing: [ 0.34, 1.61, 0.7, 1 ] easing: [ 500, 20 ]
complete: -> toggle.removeClass('state--open') complete: -> list.addClass('hide')
else else
toggle.addClass('state--open') toggle.addClass('state--open')
list.removeClass('hide')
toggleDimensions = toggle.get(0).getBoundingClientRect() toggleDimensions = toggle.get(0).getBoundingClientRect()
availableHeight = toggle.scrollParent().outerHeight() availableHeight = toggle.scrollParent().outerHeight()

View file

@ -28,7 +28,7 @@
<div class="recipient-picker clickable horizontal centered"> <div class="recipient-picker clickable horizontal centered">
<div class="recipients icon"></div> <div class="recipients icon"></div>
<div class="recipient-count">3</div> <div class="recipient-count">3</div>
<div class="recipient-list"> <div class="recipient-list hide">
<div class="list-arrow"></div> <div class="list-arrow"></div>
<div class="list-head horizontal"> <div class="list-head horizontal">
<%- @T('Recipients') %> <%- @T('Recipients') %>

View file

@ -2743,6 +2743,7 @@ footer {
height: 38px; height: 38px;
position: relative; position: relative;
z-index: 3; z-index: 3;
transition: 300ms;
} }
.ticket-edit .recipient-picker.state--open { .ticket-edit .recipient-picker.state--open {
@ -2764,7 +2765,6 @@ footer {
background: hsl(234,10%,19%); background: hsl(234,10%,19%);
left: 48px; left: 48px;
color: white; color: white;
display: none;
} }
.recipient-picker.state--open .recipient-list { .recipient-picker.state--open .recipient-list {