locked
What do I need to do to apply transition events or transition CSS again when I navigate back to home page?

    Question

  • I'm using a navigation app template. On homepage, I'm using transition CSS and also WinJS.

    .UI.Animation.enterContent(output,

    null); animations. When a user enters homepage for the first time, I want to bring in parts of the page through animated effects. I'm doing that as follows, and it runs fine for the first time. (But when I go to page 2, and navigate back to homepage, those parts doesn't come back. I know their CSS effects are not applied at this time. How do I get that?)

    ready:

    function(element, options) {

               

    // TODO: Initialize the page here.


               

                document.getElementById(

    "name").addEventListener("change", runTransition, false);

                document.getElementById(

    "name").addEventListener("change", transitionBetweenContent, false);

    //THIS GIVES REQUIRED EFFECT FOR THE FIRST TIME. BUT IT DOES NOT RUN AGAIN WHEN I NAVIGATE BACK TO HOMEPAGE FROM PAGE2..//do stuff  }

    I tried these 2 functions.

    updateLayout:

    function() {

               

    //runTransition();


            },

            processed:

    function() {

               

    //runTransition();


            }

    But they run animations when page is loading for the first time. I want to run animation when a user changes an input for the first time when they open the app.

    Thanks

    Sonal


    sonal

    Friday, February 14, 2014 7:53 PM

Answers

  • Hi Sonal,

    Thank you for your project, I can download it and run it. I have some suggestions that may give you hints.

    1, sessionState object is an object used for storing app information that can be used to restore the app's state after it has been suspended and then resumed. Work together with oncheckpoint function. 

    2, oncheckpoint event can only be fired when receiving Process Lifetime Management (PLM) notification or when the checkpoint function is called. If your app is not into suspended, you will never get the user name as I can see from your code.

    3, If you need record the user's name, sessionState is not a good choice, use local object or temp object instead. readText and writeText are the easiest way to save and read data. You could save the data while the input control change event fired.

    4, As we know once user leave the page, the page will be destroyed by system automatically, you could use a if-else statement to check if there is user name(local object/temp object) exist. If there is a user name exist, call runTransition() directly should be ok.

    Hope this helps.

    --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.



    Monday, February 17, 2014 11:47 AM
    Moderator
  • Sonal,

    If you're stuck, I suggest looking into CSS3 @keyframes rules for elements. I've been using them in different samples for several months and I find they are quick to learn and work very consistently. Here's a link to a blog post I wrote about them:

    http://blogs.msdn.com/b/msdn_answers/archive/2013/12/05/part-ii-running-multiple-css3-and-html5-animations-windows-store-ie.aspx

    Wednesday, February 19, 2014 12:26 AM

All replies

  • Hi Sonal,

    I cannot explain without seeing other parts of code. I would suggest you take a look at the sample: http://code.msdn.microsoft.com/windowsapps/using-the-animation-787f3720The third scenario gives a example of using WinJS.UI.Animation.enterContent function. 

    I want to run animation when a user changes an input for the first time when they open the app." Can I understand you have a input control, where user can input something, and while the key press event be caught, fire the runTransition() function?

    I saw your definition is:

    document.getElementById("name").addEventListener("change", runTransition, false); 
    

    change is not a real-time event, it could be fired when the previous text is not equal to current text while leaving the input control. If you need a real-time, try with "keypress" event.

    --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.

    Monday, February 17, 2014 7:51 AM
    Moderator
  • Thanks a lot, Jamles for much awaited reply. I've followed the example as you pointed, but I've some different requirement. I'm uploading my project to skydrive. Please give a look if you can and help me to learn these things.

    When we run the app, a textbox appears. User will type into it her name and clicks outside, then 2 parts of the page appears with some CSS. This works fine when app is run for the first time. (I'm learning everything here, from HTML to WinJS). Problem comes when we navigate back to home page from practice.html.

    https://skydrive.live.com/redir?resid=F4CAEFCD620982EB!3031&authkey=!AE72dojb6C-qo5I&ithint=file%2c.zip

    Second Issue on the same project :

    I tried to save some values in sessionState, but they never appears when app is run again. It also gives some error: APPHOST9623 : The app couldn't resolve ms-appx://xyz..../pages/practice/ because of this error: REDIRECT_TO_DIR. However, practice/practice.html is there and it loads. Please help me to get through this.


    sonal


    • Edited by SonalMac Monday, February 17, 2014 8:30 AM
    Monday, February 17, 2014 8:28 AM
  • Hi Sonal,

    Thank you for your project, I can download it and run it. I have some suggestions that may give you hints.

    1, sessionState object is an object used for storing app information that can be used to restore the app's state after it has been suspended and then resumed. Work together with oncheckpoint function. 

    2, oncheckpoint event can only be fired when receiving Process Lifetime Management (PLM) notification or when the checkpoint function is called. If your app is not into suspended, you will never get the user name as I can see from your code.

    3, If you need record the user's name, sessionState is not a good choice, use local object or temp object instead. readText and writeText are the easiest way to save and read data. You could save the data while the input control change event fired.

    4, As we know once user leave the page, the page will be destroyed by system automatically, you could use a if-else statement to check if there is user name(local object/temp object) exist. If there is a user name exist, call runTransition() directly should be ok.

    Hope this helps.

    --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.



    Monday, February 17, 2014 11:47 AM
    Moderator
  • Thanks a lot. I'll try your inputs and get back soon to let you know whether I succeed.

    thanks again.


    sonal

    Tuesday, February 18, 2014 7:10 PM
  • Sonal,

    If you're stuck, I suggest looking into CSS3 @keyframes rules for elements. I've been using them in different samples for several months and I find they are quick to learn and work very consistently. Here's a link to a blog post I wrote about them:

    http://blogs.msdn.com/b/msdn_answers/archive/2013/12/05/part-ii-running-multiple-css3-and-html5-animations-windows-store-ie.aspx

    Wednesday, February 19, 2014 12:26 AM