WinJS.UI.executeTransition does not execute transition RRS feed

  • Question

  • Good evening,

    I'm posting here because I'm fighting against a strange issue since a week : I'm trying to use WinJS.UI.executeTransition function to do a simple background-color transition in a Windows Store App using WinJS but... even if the color effectivly changes, no transition is executed and the color changes as if I were using a simple jQuery elt.css('background-color', 'blue').

    The exact code I'm using is :

    WinJS.UI.executeTransition(document.getElementById('myDiv'), { property: 'background-color', from: 'white', to: 'blue', duration: 3000 });

    I precise that I used this function a lot a few month ago and that it did run correctly. The issue appeared when I reopened an old project.

    I tried to create a new project and encountered the same issue.

    I deinstalled Visual Studio 2012 and cleaned all setting that I was able to find. I installed Visual Studio 2013 Ultimate and encountered the same issue again.

    I would be very thankful to anybody who will get me out of this problem.

    Wednesday, November 6, 2013 8:38 PM


All replies

  • Here is an example of the correct Syntax:

                     property: "background-color",
                     delay: 0,
                     duration: 3000,
                     timing: "linear",
                     from: "white",
                     to: "blue"


    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Thursday, November 7, 2013 5:19 PM
  • Try this version:

    WinJS.UI.executeTransition(document.getElementById('myDiv'), { property: 'backgroundColor', from: 'white', to: 'blue', delay: 2000, duration: 3000 });

    Thursday, November 7, 2013 5:44 PM
  • Hi

    Thanks for your quick response.

    So for other peoples, the solution was to not forget the "timing" value.

    I'm pretty sure that it was not required in previous versions but I may be wrong.

    However thank you very much !!! 

    Thursday, November 7, 2013 7:50 PM
  • I already tried, and it seems that WinJS doesn't matter if you use camel case or dashes.
    Thursday, November 7, 2013 7:51 PM
  • That is odd. I repro'ed the same behavior you were seeing. The only thing that fixed it was camel case.
    Friday, November 8, 2013 11:53 PM