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

the web animations of oz

Browse Source
This commit is contained in:
Adam Bradley
2015-05-26 08:33:32 -05:00
parent 20b9c7fa34
commit c6b95e1759
8 changed files with 311 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
ionic/components/app/test/animations/index.js
View File

@@ -19,21 +19,31 @@ class IonicApp {
this.animation = new Animation();
this.animation
.duration(1000)
.easing('ease-in-out');
.duration(2000)
.easing('spring');
var ball = new Animation( document.querySelector('.ball') );
ball
.from('translateX', '0px')
.to('translateX', '250px')
this.animation.addChild(ball);
var row1 = new Animation( document.querySelectorAll('.square') );
row1
.from('opacity', 1)
.to('opacity', 0)
.to('transform', 'scale(0)')
.beforePlay.addClass('added-before-play')
.afterFinish.addClass('added-after-finish')
.from('opacity', 0.8)
.to('opacity', 0.2)
this.animation.addChild(row1);
var row2 = new Animation( document.querySelectorAll('.square2') );
row2
.to('transform', 'rotate(90deg) scale(0.5)')
.from('rotate', '0deg')
.from('scale', '1')
.to('rotate', '90deg')
.to('scale', '0.5')
.beforePlay.addClass('added-before-play')
.afterFinish.addClass('added-after-finish')

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

@@ -2,9 +2,29 @@
<head>
<title>Animation Tests</title>
<script src="./web-animations-js/web-animations-next.dev.js"></script>
<style>
.ball-container {
position: absolute;
top: 200px;
left: 50px;
border: 1px solid gray;
width: 300px;
height: 51px;
}
.ball {
position: absolute;
width: 50px;
height: 50px;
background: blue;
}
</style>
</head>
<body>
<div class="ball-container">
<div class="ball"></div>
</div>
<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>