PDA

View Full Version : animating changes to position and size



andersjj
14 Sep 2010, 11:10 AM
I've got the following code that almost works. What I'm trying to do is to have a container with a card layout, that has two cards in it. I want to

1) Move the position of the container, with animation
2) Resize the container, with animation
3) Flip from card 1 to card2, with animation.

I'm trying to do 1 and 2 with the following code. I've done the flip animation before, so I'm hoping that won't be a problem making it happen with the other 2 running. I've been able to do what I'm describing in pure HTML5/CSS, so I know it can be done, just having trouble getting it to run in Sencha. When I run the below code without adding the animateMove class, it resizes the container and the card inside the container just fine, but when I try to do it with the class, it animates the container, but the card within doesn't scale properly.

Maybe there is a better way to do this with an anim on the object itself, not sure what direction to go from here.




<!DOCTYPE html>
<html><head>
<title>flowright 2</title>


<link rel="stylesheet" href="/sencha94/resources/css/ext-touch.css" type="text/css" />
<script type="text/javascript" src="/sencha94/ext-touch-debug.js"></script>
<script type="text/javascript">

Ext.setup({
onReady: function() {

var img_url1 = "<img width='100%' height='100%' src='http://images.apple.com/home/images/promo_ipod_nano20100901.jpg'>";
var img_url2 = "<img width='100%' height='100%' src='http://images.apple.com/home/images/promo_ipad_ad20100908.jpg'>";

var pic1 = new Ext.Component({
html: img_url1,
});
var pic2 = new Ext.Component({
html: img_url2,
});

var holder = new Ext.Container({
width:250,
height:200,
layout: "card",
items: [pic1,pic2],
});

holder.addClass("x-floating");

var mainPanel = new Ext.Panel({
fullscreen: true,
items: [holder],
});

(function() {

holder.addClass("animateMove");
holder.setPosition(300,50);
holder.setSize(50,50);

}).defer(2000);

},
});
</script>

<style>
div.animateMove {
-webkit-transition-property: left, top, width, height, opacity, transform;
-webkit-transition-duration: 1.25s;
}
</style>
</head>
<body>
</body>
</html>



FYI, here's a link to a page that I setup with HTML5/CSS to get the effect I'm after

http://andersjj.brinkster.net/spin.htm