Animated transitions using -webkit-transition

[walzuu]

Hi.

I tried using the -webkit-transitions described here: http://www.developer.nokia.com/Resou...ansitions.html but I couldn't get it to work. I tried to look how it's used in Photo Album example and I can't find what I'm doing wrong here. I'm trying to create this effect where text disappears smoothly.

Here's my css:
#default
{
-webkit-transition-duration: 2s;
-webkit-transition-property: width;
-webkit-transition-timing-function: linear;
}

.size_a
{
width:100px;
}

.size_b
{
overflow:hidden;
width:0px;
}

And js:
function change(){
//switch #default's class to size_b
mwl.switchClass('#default','size_b','size_a');
}

Do you guys have any idea what I'm doing wrong?

[petrosoi]

Hey,

I tested this by animating margin and width properties and noticed some issues I need to raise as defects.
Margins don't animate at all in some cases and since overflow hidden is not correctly supported, animating width for elements with text inside them results in the text being wrapped, thus causing change in the height of the element.

I can take a look at your specific use case in more detail if needed.

petro

[isalento]

Hi.

I tried using the -webkit-transitions described here: http://www.developer.nokia.com/Resou...ansitions.html but I couldn't get it to work. I tried to look how it's used in Photo Album example and I can't find what I'm doing wrong here. I'm trying to create this effect where text disappears smoothly.

Here's my css:
#default
{
-webkit-transition-duration: 2s;
-webkit-transition-property: width;
-webkit-transition-timing-function: linear;
}

.size_a
{
width:100px;
}

.size_b
{
overflow:hidden;
width:0px;
}

And js:
function change(){
//switch #default's class to size_b
mwl.switchClass('#default','size_b','size_a');
}

Do you guys have any idea what I'm doing wrong?

Hi,

Calling change() will result into a round trip to proxy server. Try to attach it directly to some element so it will be executed on the device.

<div onclick="mwl.switchClass('#default','size_a','size_b');">Change</div>
<div onclick="mwl.switchClass('#default','size_b','size_a');">Change back</div>

Br,
Ilkka

[isalento]

Updating this thread with more information on transitions.
Animating multiple transition at a time does not work.
For example -webkit-transition-property: margin, height, width ; is not supported.

The only way to do it is to animate only a single property at a time. Even then you must use explicit margin-top and margin-left instead of margin, for margin animation.

-webkit-transition-property: margin-top;
-webkit-transition-property: margin-left;
-webkit-transition-property: width;
-webkit-transition-property: height;

-Ilkka