×

Discussion Board

Results 1 to 4 of 4
  1. #1
    Registered User
    Join Date
    Jul 2011
    Posts
    1

    Animated transitions using -webkit-transition

    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?

  2. #2
    Nokia Developer Moderator
    Join Date
    Mar 2003
    Posts
    115

    Re: Animated transitions using -webkit-transition

    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
    'petro
    @petrosoininen

  3. #3
    Nokia Developer Moderator
    Join Date
    Jun 2008
    Location
    Tampere
    Posts
    833

    Re: Animated transitions using -webkit-transition

    Quote Originally Posted by walzuu View Post
    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.
    Code:
    <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

  4. #4
    Nokia Developer Moderator
    Join Date
    Jun 2008
    Location
    Tampere
    Posts
    833

    Re: Animated transitions using -webkit-transition

    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.

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

Similar Threads

  1. How to customize slide transition in j2me(using LWUIT)
    By sara mukhtar in forum Mobile Java General
    Replies: 0
    Last Post: 2011-06-23, 07:04
  2. How to use Fly Transition and Scale Transition ?
    By gougou0601 in forum Symbian User Interface
    Replies: 1
    Last Post: 2011-03-24, 07:10
  3. Screen animated transitions on Nokia 5800
    By jaimeat1 in forum Symbian Media (Closed)
    Replies: 1
    Last Post: 2009-11-25, 10:21
  4. Poor performance of WRT/Webkit transitions
    By axeljaeger in forum Symbian
    Replies: 3
    Last Post: 2009-07-07, 04:53
  5. OutOfMemoryError using transitions in LWUIT
    By angusrose in forum Mobile Java Tools & SDKs
    Replies: 6
    Last Post: 2009-05-13, 10:49

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •