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

child animations init

Browse Source
This commit is contained in:
Adam Bradley
2015-04-28 11:59:38 -05:00
parent 19c16e7433
commit 08a5fd9fad
3 changed files with 219 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
ionic/components/app/test/animations/main.html
View File

@@ -4,7 +4,7 @@
</head>
<body>
<div style="position: absolute; top: 300px; left: 0px;">
<div style="position: absolute; top: 300px; left: 50px;">
<div class="red square" style="position:absolute; width:100px; height:100px; background:red; top: 0; left: 0;"></div>
<div class="green square" style="position:absolute; width:100px; height:100px; background:green; top: 0; left: 100px;"></div>
@@ -12,20 +12,27 @@
</div>
<div style="position: absolute; top: 400px; left: 50px;">
<div class="yellow square2" style="position:absolute; width:100px; height:100px; background:yellow; top: 0; left: 0;"></div>
<div class="purple square2" style="position:absolute; width:100px; height:100px; background:purple; top: 0; left: 100px;"></div>
<div class="maroon square2" style="position:absolute; width:100px; height:100px; background:maroon; top: 0; left: 200px;"></div>
</div>
<p>
<input type="range" (input)="percent($event)" value="0" min="0" max="100" style="width:200px">
</p>
<p>
<button class="button button-primary" (click)="fadeOut($event)">Fade Out</button>
<button class="button button-primary" (click)="fadeIn($event)">Fade In</button>
<button class="button button-primary" (click)="stop($event)">Stop</button>
<button class="button button-primary" (click)="fadeOut($event)">Out</button>
<button class="button button-primary" (click)="fadeIn($event)">In</button>
</p>
<p>
<!-- <p>
<button class="button button-primary" (click)="velocityStart($event)">Velocity Start</button>
</p>
</p> -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script>

110
ionic/components/app/test/animations/main.js
View File

@@ -11,26 +11,42 @@ let scale = 0.6;
templateUrl: 'main.html'
})
class IonicApp {
constructor() {
}
fadeOut() {
console.debug('fadeOut');
this.animation = new Animation();
this.animation.elements( document.querySelectorAll('.square') );
this.animation.duration(1000);
this.animation.easing('linear');
var animation = new Animation();
this.animation.property('opacity', opacity);
this.animation.property('translateX', translateX);
this.animation.property('translateY', translateX);
this.animation.property('rotateZ', rotateZ);
this.animation.property('scale', scale);
animation.duration(1000);
animation.easing('linear');
let q = this.animation.start();
var row1 = new Animation();
row1.elements( document.querySelectorAll('.square') );
row1.property('opacity', opacity)
.property('translateX', translateX)
.property('translateY', translateX)
.property('rotateZ', rotateZ)
.property('scale', scale);
animation.addChild(row1);
var row2 = new Animation();
row2.elements( document.querySelectorAll('.square2') );
row2.property('opacity', opacity);
row2.property('translateX', '-100px');
row2.property('translateY', '-100px');
row2.property('rotateZ', '-180deg');
row2.property('scale', 0.4);
animation.addChild(row2);
let q = animation.start();
q.then(()=> {
console.log('fade out complete')
@@ -39,19 +55,38 @@ class IonicApp {
fadeIn() {
console.debug('fadeIn');
this.animation = new Animation();
this.animation.elements( document.querySelectorAll('.square') );
this.animation.duration(1000);
this.animation.easing('linear');
var animation = new Animation();
animation.elements();
this.animation.property('opacity', 1);
this.animation.property('translateX', 0);
this.animation.property('translateY', 0);
this.animation.property('rotateZ', 0);
this.animation.property('scale', 1);
animation.duration(1000);
animation.easing('linear');
let q = this.animation.start();
var row1 = new Animation();
row1.elements( document.querySelectorAll('.square') );
row1.property('opacity', 1);
row1.property('translateX', 0);
row1.property('translateY', 0);
row1.property('rotateZ', 0);
row1.property('scale', 1);
animation.addChild(row1);
var row2 = new Animation();
row2.elements( document.querySelectorAll('.square2') );
row2.property('opacity', 1);
row2.property('translateX', 0);
row2.property('translateY', 0);
row2.property('rotateZ', 0);
row2.property('scale', 1);
animation.addChild(row2);
let q = animation.start();
q.then(()=> {
console.log('fade in complete')
@@ -67,13 +102,30 @@ class IonicApp {
if (!this.percentAnimation) {
this.percentAnimation = new Animation();
this.percentAnimation.elements( document.querySelectorAll('.square') );
this.percentAnimation.property('opacity', opacity);
this.percentAnimation.property('translateX', translateX);
this.percentAnimation.property('translateY', translateX);
this.percentAnimation.property('rotateZ', rotateZ);
this.percentAnimation.property('scale', scale);
var row1 = new Animation();
row1.elements( document.querySelectorAll('.square') );
row1.property('opacity', 1);
row1.property('translateX', 0);
row1.property('translateY', 0);
row1.property('rotateZ', 0);
row1.property('scale', 1);
this.percentAnimation.addChild(row1);
var row2 = new Animation();
row2.elements( document.querySelectorAll('.square2') );
row2.property('opacity', 1);
row2.property('translateX', 0);
row2.property('translateY', 0);
row2.property('rotateZ', 0);
row2.property('scale', 1);
this.percentAnimation.addChild(row2);
this.percentAnimation.ready();
}