javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Basic animation stuff

Browse Source
This commit is contained in:
Max Lynch
2013-09-24 15:11:31 -05:00
parent 81272e0e3e
commit c7aa843fd9
6 changed files with 123 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
dist/ionic.css vendored
View File

@ -1436,7 +1436,6 @@ address {
.modal {
position: fixed;
z-index: 10;
visibility: hidden;
top: 0;
width: 100%;
min-height: 100%;
@ -1446,11 +1445,10 @@ address {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); }
.modal.active {
visibility: visible;
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
opacity: 1;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
height: 100%; }
.list {
margin-bottom: 20px;
@ -2144,11 +2142,18 @@ a.button {
.slide-in-up {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
transition: transform 0.25s, opacity 1ms 0.25s;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); }
.slide-in-up.enter {
-webkit-transition: -webkit-transform 0.25s;
transition: transform 0.25s;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); }
.slide-in-up.enter {
-webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
transition: transform 0.25s, opacity 1ms 0.25s; }
.slide-in-up.enter-active {
-webkit-transition: -webkit-transform 0.25s;
transition: transform 0.25s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.slide-in-up.leave {
-webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
transition: transform 0.25s, opacity 1ms 0.25s; }
.slide-in-up.leave-active {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); }

46
dist/ionic.js vendored
View File

@ -1626,16 +1626,44 @@ if ( document.readyState === "complete" ) {
})(ionic = window.ionic || {});
;(function(ionic) {
ionic.Animator = {
animate: function(element, fn) {
var endFunc = function() {
console.log('Animation finished for element', element);
element.removeEventListener('webkitTransitionEnd', endFunc);
element.removeEventListener('transitionEnd', endFunc);
};
element.addEventListener('webkitTransitionEnd', endFunc);
element.addEventListener('transitionEnd', endFunc);
animate: function(element, className, fn) {
return {
leave: function() {
var endFunc = function() {
console.log('Animation finished for element', element);
element.classList.add('enter');
element.classList.remove('leave');
element.classList.remove('leave-active');
element.removeEventListener('webkitTransitionEnd', endFunc);
element.removeEventListener('transitionEnd', endFunc);
};
element.addEventListener('webkitTransitionEnd', endFunc);
element.addEventListener('transitionEnd', endFunc);
element.classList.add('leave');
element.classList.add('leave-active');
return this;
},
enter: function() {
var endFunc = function() {
console.log('Animation finished for element', element);
element.classList.remove('enter');
element.classList.remove('enter-active');
element.removeEventListener('webkitTransitionEnd', endFunc);
element.removeEventListener('transitionEnd', endFunc);
};
element.addEventListener('webkitTransitionEnd', endFunc);
element.addEventListener('transitionEnd', endFunc);
element.classList.add('enter');
element.classList.add('enter-active');
return this;
}
};
}
};
})(ionic = window.ionic || {});

46
js/animate.js
View File

@ -1,15 +1,43 @@
(function(ionic) {
ionic.Animator = {
animate: function(element, fn) {
var endFunc = function() {
console.log('Animation finished for element', element);
element.removeEventListener('webkitTransitionEnd', endFunc);
element.removeEventListener('transitionEnd', endFunc);
};
element.addEventListener('webkitTransitionEnd', endFunc);
element.addEventListener('transitionEnd', endFunc);
animate: function(element, className, fn) {
return {
leave: function() {
var endFunc = function() {
console.log('Animation finished for element', element);
element.classList.add('enter');
element.classList.remove('leave');
element.classList.remove('leave-active');
element.removeEventListener('webkitTransitionEnd', endFunc);
element.removeEventListener('transitionEnd', endFunc);
};
element.addEventListener('webkitTransitionEnd', endFunc);
element.addEventListener('transitionEnd', endFunc);
element.classList.add('leave');
element.classList.add('leave-active');
return this;
},
enter: function() {
var endFunc = function() {
console.log('Animation finished for element', element);
element.classList.remove('enter');
element.classList.remove('enter-active');
element.removeEventListener('webkitTransitionEnd', endFunc);
element.removeEventListener('transitionEnd', endFunc);
};
element.addEventListener('webkitTransitionEnd', endFunc);
element.addEventListener('transitionEnd', endFunc);
element.classList.add('enter');
element.classList.add('enter-active');
return this;
}
};
}
};
})(ionic = window.ionic || {});

31
scss/ionic/_animations.scss
View File

@ -14,14 +14,29 @@ $bezier-function: cubic-bezier(.1, .5, .1, 1);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s;
-webkit-transition-timing-function: $bezier-function;
}
.slide-in-up.enter {
-webkit-transition: -webkit-transform .25s;
transition: transform .25s;
-webkit-transition-timing-function: $bezier-function;
&.enter {
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s;
}
&.enter-active {
-webkit-transition: -webkit-transform .25s;
transition: transform .25s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
&.leave {
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s;
}
&.leave-active {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}

8
scss/ionic/_modal.scss
View File

@ -6,7 +6,6 @@
position: fixed;
z-index: $zindex-modal;
visibility: hidden;
top: 0;
@ -26,13 +25,10 @@
// Active modal
&.active {
visibility: visible;
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
opacity: 1;
height: 100%;
// Put it up
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

12
test/modals.html
View File

@ -38,20 +38,22 @@
<script src="../dist/ionic.js"></script>
<script>
var open = document.getElementById('modal-opener');
var anim = ionic.Animator.animate(modal, function() {
console.log('Animation finished');
});
ionic.on('tap', function(e) {
var modal = document.getElementById('modal');
//modal.classList.add('active');
ionic.Animator.animate(modal, function() {
console.log('Animation finished');
});
modal.classList.add('active');
anim.enter();
return false;
}, open);
var closer = document.getElementById('modal-closer');
ionic.on('tap', function(e) {
var modal = document.getElementById('modal');
//modal.classList.remove('active');
modal.classList.remove('active');
anim.leave();
return false;
}, closer);
</script>