javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

improve list animations, closes #105

Browse Source
This commit is contained in:
Adam Bradley
2013-12-13 22:33:16 -06:00
parent 75cbb32463
commit 2779609766
9 changed files with 54 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
dist/css/ionic.css vendored
View File

@@ -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; }

1
dist/css/themes/ionic-ios7.css vendored
View File

@@ -1,4 +1,3 @@
@charset "UTF-8";
/*!
* Copyright 2013 Drifty Co.
* http://drifty.com/

31
dist/js/ionic.js vendored
View File

@@ -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;

31
js/views/listView.js
View File

@@ -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;

7
scss/_items.scss
View File

@@ -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%;

2
scss/_list.scss
View File

@@ -18,7 +18,7 @@
*/
.list-editing {
.item-content {
margin-left: 50px;
@include translate3d(50px, 0, 0);
}
}
.list-reordering {

2
scss/_menu.scss
View File

@@ -32,5 +32,5 @@
}
.menu-animated {
@include transform($menu-animation-speed ease);
@include transition-transform($menu-animation-speed ease);
}

12
scss/_mixins.scss
View File

@@ -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

2
scss/_slide-box.scss
View File

@@ -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 {