locked
A better way to do Tap and click feedback Animation on WinJS?

    Question

  • Hi,

    Is there a better way to do the Tap and click feedback animation? Right now I'm Using this code:

    WinJS.Utilities.query(".btnColorear").forEach(function (button) { button.addEventListener("click", function (e) { WinJS.UI.Animation.pointerDown(e.target).done(function () { WinJS.UI.Animation.pointerUp(e.target).done(function () { WinJS.Navigation.navigate("/Views/Colorear/Colorear.html"); }); });

    }); });


    Wednesday, November 12, 2014 7:23 AM

Answers

  • Hi DeividKamuii

    Two suggestions:

    1, We do not suggest use .done().done() in WinJS, insteads try to use .then().done(), see this for more information: Chaining promises

    2, If you need a better animation than system provide, try to write your own animation and play it. For instance you can use some third party code as an assistant.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Thursday, November 13, 2014 1:51 AM
    Moderator

All replies

  • Hi DeividKamuii

    Two suggestions:

    1, We do not suggest use .done().done() in WinJS, insteads try to use .then().done(), see this for more information: Chaining promises

    2, If you need a better animation than system provide, try to write your own animation and play it. For instance you can use some third party code as an assistant.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Thursday, November 13, 2014 1:51 AM
    Moderator
  • Hi Jamles Hez,

    So if I get it right, this is the way I should implement your suggestions?

    1.- I've changed the code using then() like this:

    WinJS.Utilities.query(".btnColorear").forEach(function (button) {
                    button.addEventListener("click", function (e) {
                        WinJS.UI.Animation.pointerDown(e.target).then(function () {
                            WinJS.UI.Animation.pointerUp(e.target).done(function () {
                                WinJS.Navigation.navigate("/Views/Colorear/Colorear.html");
                            });
                        });
                    });
                });

    2.- I used animate.css to do the tap animation on click event

    $('.btnFechas').addClass('animated rotateIn');

    Am I right or there is a better way?


    Thursday, November 13, 2014 3:34 AM
  • 1, Yes, looks better.

    2, I'm not familiar with animate.css, simply search on the Internet, its good.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, November 20, 2014 7:48 AM
    Moderator