From 277960976678fe8a6386395ea9ef6ae8fb4834d3 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 13 Dec 2013 22:33:16 -0600 Subject: [PATCH] improve list animations, closes #105 --- dist/css/ionic.css | 16 ++++++---------- dist/css/themes/ionic-ios7.css | 1 - dist/js/ionic.js | 31 +++++++++++++++++++------------ js/views/listView.js | 31 +++++++++++++++++++------------ scss/_items.scss | 7 +------ scss/_list.scss | 2 +- scss/_menu.scss | 2 +- scss/_mixins.scss | 12 ++++++------ scss/_slide-box.scss | 2 +- 9 files changed, 54 insertions(+), 50 deletions(-) diff --git a/dist/css/ionic.css b/dist/css/ionic.css index be8156c6b2..f4002a30f0 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -1,4 +1,3 @@ -@charset "UTF-8"; /*! * Copyright 2013 Drifty Co. * http://drifty.com/ @@ -3849,9 +3848,9 @@ button.item.item-complex { * Slide left and right and be dragged to support different * UI interactions. */ - -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; - -moz-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; - transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; + -webkit-transition: all 0.1s ease-in-out; + -moz-transition: all 0.1s ease-in-out; + transition: all 0.1s ease-in-out; position: relative; z-index: 2; padding: 15px 40px 15px 15px; @@ -4137,11 +4136,6 @@ button.item-button-right:after { color: #aaa; font-size: 14px; } -.item-complex .item-content.item-sliding { - -webkit-transition: -webkit-transform 0.1s ease-in-out; - -moz-transition: -moz-transform 0.1s ease-in-out; - transition: transform 0.1s ease-in-out; } - .item-reordering { position: absolute; width: 100%; } @@ -4265,7 +4259,9 @@ button.item-button-right:after { * "edit mode" or reordering list items */ .list-editing .item-content { - margin-left: 50px; } + -webkit-transform: translate3d(50px, 0, 0); + -moz-transform: translate3d(50px, 0, 0); + transform: translate3d(50px, 0, 0); } .list-reordering .item-content { margin-right: 50px; } diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css index 1e5a055c50..23bcd03921 100644 --- a/dist/css/themes/ionic-ios7.css +++ b/dist/css/themes/ionic-ios7.css @@ -1,4 +1,3 @@ -@charset "UTF-8"; /*! * Copyright 2013 Drifty Co. * http://drifty.com/ diff --git a/dist/js/ionic.js b/dist/js/ionic.js index dd8d922400..4b286e7344 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -4291,6 +4291,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ } _this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)'; + _this._currentDrag.content.style.webkitTransition = 'none'; } }); }; @@ -4321,22 +4322,28 @@ ionic.views.Scroll = ionic.views.View.inherit({ } - var content = this._currentDrag.content; + // var content = this._currentDrag.content; - var onRestingAnimationEnd = function(e) { - if(e.propertyName == '-webkit-transform') { - content.classList.remove(ITEM_SLIDING_CLASS); - } - e.target.removeEventListener('webkitTransitionEnd', onRestingAnimationEnd); - }; + // var onRestingAnimationEnd = function(e) { + // if(e.propertyName == '-webkit-transform') { + // if(content) content.classList.remove(ITEM_SLIDING_CLASS); + // } + // e.target.removeEventListener('webkitTransitionEnd', onRestingAnimationEnd); + // }; window.rAF(function() { - var currentX = parseFloat(_this._currentDrag.content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0; - if(currentX !== restingPoint) { - _this._currentDrag.content.classList.add(ITEM_SLIDING_CLASS); - _this._currentDrag.content.addEventListener('webkitTransitionEnd', onRestingAnimationEnd); + // var currentX = parseFloat(_this._currentDrag.content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0; + // if(currentX !== restingPoint) { + // _this._currentDrag.content.classList.add(ITEM_SLIDING_CLASS); + // _this._currentDrag.content.addEventListener('webkitTransitionEnd', onRestingAnimationEnd); + // } + if(restingPoint === 0) { + _this._currentDrag.content.style.webkitTransform = ''; + } else { + _this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)'; } - _this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)'; + _this._currentDrag.content.style.webkitTransition = ''; + // Kill the current drag _this._currentDrag = null; diff --git a/js/views/listView.js b/js/views/listView.js index 8a0962a2fc..4545cb3c3c 100644 --- a/js/views/listView.js +++ b/js/views/listView.js @@ -93,6 +93,7 @@ } _this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)'; + _this._currentDrag.content.style.webkitTransition = 'none'; } }); }; @@ -123,22 +124,28 @@ } - var content = this._currentDrag.content; + // var content = this._currentDrag.content; - var onRestingAnimationEnd = function(e) { - if(e.propertyName == '-webkit-transform') { - content.classList.remove(ITEM_SLIDING_CLASS); - } - e.target.removeEventListener('webkitTransitionEnd', onRestingAnimationEnd); - }; + // var onRestingAnimationEnd = function(e) { + // if(e.propertyName == '-webkit-transform') { + // if(content) content.classList.remove(ITEM_SLIDING_CLASS); + // } + // e.target.removeEventListener('webkitTransitionEnd', onRestingAnimationEnd); + // }; window.rAF(function() { - var currentX = parseFloat(_this._currentDrag.content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0; - if(currentX !== restingPoint) { - _this._currentDrag.content.classList.add(ITEM_SLIDING_CLASS); - _this._currentDrag.content.addEventListener('webkitTransitionEnd', onRestingAnimationEnd); + // var currentX = parseFloat(_this._currentDrag.content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0; + // if(currentX !== restingPoint) { + // _this._currentDrag.content.classList.add(ITEM_SLIDING_CLASS); + // _this._currentDrag.content.addEventListener('webkitTransitionEnd', onRestingAnimationEnd); + // } + if(restingPoint === 0) { + _this._currentDrag.content.style.webkitTransform = ''; + } else { + _this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)'; } - _this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)'; + _this._currentDrag.content.style.webkitTransition = ''; + // Kill the current drag _this._currentDrag = null; diff --git a/scss/_items.scss b/scss/_items.scss index c9124bcb4f..a7a1ed5c3d 100644 --- a/scss/_items.scss +++ b/scss/_items.scss @@ -178,8 +178,7 @@ button.item.item-complex { * Slide left and right and be dragged to support different * UI interactions. */ - - @include transition(margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out); + @include transition(all 0.1s ease-in-out); position: relative; z-index: $z-index-item; @@ -505,10 +504,6 @@ button.item-button-right:after { // Item Editing // ------------------------------- -.item-complex .item-content.item-sliding { - @include transform(0.1s ease-in-out); -} - .item-reordering { position: absolute; width: 100%; diff --git a/scss/_list.scss b/scss/_list.scss index 6319aeb0b1..c3ad0454ef 100644 --- a/scss/_list.scss +++ b/scss/_list.scss @@ -18,7 +18,7 @@ */ .list-editing { .item-content { - margin-left: 50px; + @include translate3d(50px, 0, 0); } } .list-reordering { diff --git a/scss/_menu.scss b/scss/_menu.scss index a64207008f..935987583e 100644 --- a/scss/_menu.scss +++ b/scss/_menu.scss @@ -32,5 +32,5 @@ } .menu-animated { - @include transform($menu-animation-speed ease); + @include transition-transform($menu-animation-speed ease); } diff --git a/scss/_mixins.scss b/scss/_mixins.scss index ffe8346c11..c391b46b28 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -277,12 +277,6 @@ // Transition Mixins // -------------------------------------------------- -@mixin transform($properties...) { - -webkit-transition: -webkit-transform $properties; - -moz-transition: -moz-transform $properties; - transition: transform $properties; -} - @mixin transition($transition...) { -webkit-transition: $transition; -moz-transition: $transition; @@ -308,6 +302,12 @@ -moz-transition-property: $property; transition-property: $property; } +@mixin transition-transform($properties...) { + // special case cuz of transform vendor prefixes + -webkit-transition: -webkit-transform $properties; + -moz-transition: -moz-transform $properties; + transition: transform $properties; +} // Animation Mixins diff --git a/scss/_slide-box.scss b/scss/_slide-box.scss index 2b1988dab1..43cc37ca75 100644 --- a/scss/_slide-box.scss +++ b/scss/_slide-box.scss @@ -14,7 +14,7 @@ position: relative; white-space: nowrap; font-size: 0; // Remove the gaps between slide content items - @include transform(0 ease-in-out); + @include transition-transform(0 ease-in-out); } .slide-box-animating {