locked
"transitionend" event isn't fired everytimes

    Question

  • Hello,

    I'm developping an game app which will be available on Windows (app), Android, iOS, WP and browsers.

    On desktops you can use arrows, so you can press them more rapidly. A press is linked to a CSS animation. And you can't fire any animation until the current animation was completed. To do that, I use the "transitionend" event to mean in my program : "Hey, now you can launch an animation" ^^.

    The problem? Windows doesn't emit every "transitionend" event. So my game stay blocked... Have you any idea ?

    I precise I haven't this problem on desktop browsers: Google Chrome, Firefox, Safari, Internet Explorer, Opera...

    Thanks in advance.

    Best regards,

    Thursday, November 6, 2014 5:54 PM

Answers

  • Hi,

    Thanks for your interesting answer.

    But I just noticed when I switch the run to "Release" mode, it works perfectly... If the problem comes back, I will try the functions you advised (but I haven't the time to try yet).

    Thanks again!

    Best regards,

    Sunday, November 9, 2014 12:51 AM

All replies

  • Hi Sneko,

    I’m not so sure what you want to do with the arrows. But you can use HTML, CSS ans Javascript technology to build windows store app and windows phone app. Please refer to see how to build app with WinJS.  WinJS is an open source Javascript library developed by Microsoft. You can build cross-platform app with browsers.

    If you still have questions about this issue, please post more information about your scenario.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    Friday, November 7, 2014 5:50 AM
    Moderator
  • It's exactly what I'm doing. I use HTML+CSS+JavaScript.

    In my game, you can move a piece on a grid. On desktops, you move it with arrow keys (and by touching on smartphone). When you press a key, the piece moves on the right/left/up/down (depend of your key pressed), and to do this, I use animations in CSS. Do you Understand?

    Then, I need to know when animation is completed, so I catch this event with the "transitionend" event on my piece. But it isn't fired everytimes (only on the Windows app).

    Best regards,

    Friday, November 7, 2014 10:06 PM
  • Hi,

    Have you checked the WinJS.UI.executeTransition and WinJS.UI.executeAnimation functions, would those work in your case? Those return nicely Promises which you can use to detect the end of animation/transition. I've noticed myself that the 'transitionend' isn't 100% reliable, but via use of these built-in functions you could offload the handling of this 'transitionend' event to the framework.

    By the way, the implementation of these functions seems to have a manual timeout set to ensure that the Promise is completed (about) at the correct time. So, if these functions don't work for you as-is, at least you have a reference implementation available in the WinJS source code (see base.js:8762, WinJS 2.0).

    The question why 'transitionend' isn't fully reliable in IE is another story, might be worth checking if IE issue tracker has an open bug about that.

    Saturday, November 8, 2014 3:06 PM
  • Hi,

    Thanks for your interesting answer.

    But I just noticed when I switch the run to "Release" mode, it works perfectly... If the problem comes back, I will try the functions you advised (but I haven't the time to try yet).

    Thanks again!

    Best regards,

    Sunday, November 9, 2014 12:51 AM
  • Hi,

    Good to hear that you got your problem solved!

    So, works in "Release" mode...interesting to know, thanks. Need to remember that myself, thanks for sharing that observation.

    Sunday, November 9, 2014 11:23 AM