locked
How to implement sliding between contents using WinJS.UI.Animation?

    Question

  • Could you please advise how to implement sliding between elements?

    I need that element going out when second element going in (to replace each other).
    Something  like that:

     

    I'm trying to implement this using WinJS.UI.Animation (exitContent and enterContent methods), but it's not look good...  The first element is hidden and second element is showed, but there is not sliding... 

    It's my code :

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>default</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
        <!-- HelloWorld references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
        <style>
            .body 
            {
                background-color:gray;
            }
            .content
            {
                ;
                left: 20em;
                top: 10em;
                width:  40em;
                height: 20em;
                border: 0.5em solid;
                border-color:white;
                text-align:center;
                vertical-align:middle;
            }
            .content1
            {
                background-color:coral;
            }
            .content2
            {
                background-color:green;
            }
    
           .button {
               ;
               left:15em;
               top:3em;
               width: 10em;
               height: 2.35em;
               line-height: 2.35em;
               text-align: center;
               color: #FFFFFF;
               background-color: #333333;
               cursor: pointer;
            }
        </style>
    
        <script>
            function transitContent(elementId)
            {
                var outgoing = document.getElementById(elementId == "btn1" ? "content1" : "content2");
                var incoming = document.getElementById(elementId == "btn1" ? "content2" : "content1");
    
                WinJS.UI.Animation.exitContent(outgoing, { top: "0px", left: "-1700px", rtlflip: true }, { mechanism: "transition" });
                WinJS.UI.Animation.enterContent(incoming, { top: "0px", left: "1700px", rtlflip: true }, { mechanism: "transition" });
    
                hide_show();
    
                function hide_show()
                {
                    outgoing.style.display = "none";
                    incoming.style.display = "block";
                }
    
            }
        </script>
    </head>
    
    <body class="body">
        
        <!--content 1-->
        <div id="content1" class="content content1"  style="display:block">
        <h1><br/><br/>The content number 1</h1>
        <div class="button" id="btn1" onclick="transitContent(this.id)">Go to</div>
        </div>
        
        <!--content 2-->
        <div id="content2" class="content content2"  style="display:none">
        <h1><br/><br/>The content number 2</h1>
        <div class="button" id="btn2" onclick="transitContent(this.id)">Go back</div>
        </div>
        
    </body>
    </html>



    • Edited by _dima Tuesday, March 04, 2014 7:57 AM
    Monday, March 03, 2014 3:07 PM

Answers

  • Hi dima,

    Thanks for your code.

    You could try following code to enable enterContent animation.

    #1, you have to enable animation by using WinJS.UI.enableAnimation()

    #2, you have to put the hide_show() method before animation start.

    #3, I would suggest you to use  Promise pattern for animation stuff.

            function transitContent(elementId) {
                var outgoing = document.getElementById(elementId == "btn1" ? "content1" : "content2");
                var incoming = document.getElementById(elementId == "btn1" ? "content2" : "content1");
                hide_show();
                WinJS.UI.enableAnimations();
                WinJS.UI.Animation.exitContent(outgoing, { top: "0px", left: "-1700px", rtlflip: true }, { mechanism: "transition" }).done(
                    function () {
                        WinJS.UI.Animation.enterContent(incoming, { top: "0px", left: "1700px", rtlflip: true }, { mechanism: "transition" });
                    }
                );
    
                function hide_show() {
                    outgoing.style.display = "none";
                    incoming.style.display = "block";
                }
    
            }

    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.

    Tuesday, March 04, 2014 4:59 AM
    Moderator
  •  

    I'done test code. But it doesn't look good practically. So I keep first edition of the animation. 

    Jamles, thank you very much for your help.

    If somebody needs test code of the second way of the animation it's here: 

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>default</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
        <!-- HelloWorld references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
        <style>
            .body{
                background-color:rgb(76, 96, 122);
            }
            .main_div {
                ;
                left:  10em;
                top: 10em;
            }
            .content{
                ;
                width:  40em;
                height: 20em;
                border: 0.5em solid;
                border-color:white;
                text-align:center;
                float:left;
            }
            .content1{
                background-color:coral;
            }
            .content2{
                background-color:green;
            }
    
           .button {
               ;
               left:15em;
               top:3em;
               width: 10em;
               height: 2.35em;
               line-height: 2.35em;
               text-align: center;
               color: #FFFFFF;
               background-color: #333333;
               cursor: pointer;
            }
        </style>
    
        <script>
            function transitContent(elementId){
                var outgoing = document.getElementById("mainDiv");
                var element1 = document.getElementById("content_1");
                var element2 = document.getElementById("content_2");
    
                element2.style.display = "block";
    
                WinJS.UI.enableAnimations();
                WinJS.UI.Animation.exitContent(outgoing, { top: "0px", left: "-1700px", rtlflip: true }, { mechanism: "transition" }).done(
                    function (){
                        element1.style.display = "none";
                        element2.style.display = "block";
                    });
            }
        </script>
    </head>
    
    <body class="body">
        
        <div id="mainDiv" class="main_div">
            <!--content 1-->
            <div id="content_1" class="content content1">
            <h1><br/><br/>The content number 1</h1>
            <div class="button" id="btn1" onclick="transitContent(this.id)">Go to</div>
            </div>
            <div style="width:5em;float:left;"></div>
            <!--content 2-->
            <div id="content_2" class="content content2" style="display:none;">
            <h1><br/><br/>The content number 2</h1>
            <div style="clear: left;"></div>
        </div>
    
        </div>
        
    </body>
    </html>
    


    Tuesday, March 04, 2014 2:33 PM

All replies

  • Hi dima,

    Thanks for your code.

    You could try following code to enable enterContent animation.

    #1, you have to enable animation by using WinJS.UI.enableAnimation()

    #2, you have to put the hide_show() method before animation start.

    #3, I would suggest you to use  Promise pattern for animation stuff.

            function transitContent(elementId) {
                var outgoing = document.getElementById(elementId == "btn1" ? "content1" : "content2");
                var incoming = document.getElementById(elementId == "btn1" ? "content2" : "content1");
                hide_show();
                WinJS.UI.enableAnimations();
                WinJS.UI.Animation.exitContent(outgoing, { top: "0px", left: "-1700px", rtlflip: true }, { mechanism: "transition" }).done(
                    function () {
                        WinJS.UI.Animation.enterContent(incoming, { top: "0px", left: "1700px", rtlflip: true }, { mechanism: "transition" });
                    }
                );
    
                function hide_show() {
                    outgoing.style.display = "none";
                    incoming.style.display = "block";
                }
    
            }

    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.

    Tuesday, March 04, 2014 4:59 AM
    Moderator
  • Hi Jamles,

    Thank you very much for your help!

    This is very helpful advice.

    But now I cannot animate "entering" and "exiting" of the content in the same time.

    I'm trying to do something like that:


    • Edited by _dima Tuesday, March 04, 2014 2:33 PM
    Tuesday, March 04, 2014 9:09 AM
  • I think it would not easy to implement with your current HTML structure. 

    You can put both of your contents in a big div, lets say "container" and set its display as inline. Then you only need to apply the animation on your container, you can animation both of the contents at the same time. After the animation is finished, hide the first content and re-position it right next to the second content.

    That would be one loop. 

    However, if you need, I can create a demo for you tomorrow, i dont have VS offhand to debug the app. But this would be a general idea.

    ==update==

    exitContent functions well, if you comment the enterContent method. The only problem is exitContent will hide the object while animate, but not hide after animate.

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



    Tuesday, March 04, 2014 11:19 AM
    Moderator
  • Thank you very much.
    I'll try to implement this idea and will post code if it will work fine. 
    Tuesday, March 04, 2014 12:44 PM
  •  

    I'done test code. But it doesn't look good practically. So I keep first edition of the animation. 

    Jamles, thank you very much for your help.

    If somebody needs test code of the second way of the animation it's here: 

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>default</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
        <!-- HelloWorld references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
        <style>
            .body{
                background-color:rgb(76, 96, 122);
            }
            .main_div {
                ;
                left:  10em;
                top: 10em;
            }
            .content{
                ;
                width:  40em;
                height: 20em;
                border: 0.5em solid;
                border-color:white;
                text-align:center;
                float:left;
            }
            .content1{
                background-color:coral;
            }
            .content2{
                background-color:green;
            }
    
           .button {
               ;
               left:15em;
               top:3em;
               width: 10em;
               height: 2.35em;
               line-height: 2.35em;
               text-align: center;
               color: #FFFFFF;
               background-color: #333333;
               cursor: pointer;
            }
        </style>
    
        <script>
            function transitContent(elementId){
                var outgoing = document.getElementById("mainDiv");
                var element1 = document.getElementById("content_1");
                var element2 = document.getElementById("content_2");
    
                element2.style.display = "block";
    
                WinJS.UI.enableAnimations();
                WinJS.UI.Animation.exitContent(outgoing, { top: "0px", left: "-1700px", rtlflip: true }, { mechanism: "transition" }).done(
                    function (){
                        element1.style.display = "none";
                        element2.style.display = "block";
                    });
            }
        </script>
    </head>
    
    <body class="body">
        
        <div id="mainDiv" class="main_div">
            <!--content 1-->
            <div id="content_1" class="content content1">
            <h1><br/><br/>The content number 1</h1>
            <div class="button" id="btn1" onclick="transitContent(this.id)">Go to</div>
            </div>
            <div style="width:5em;float:left;"></div>
            <!--content 2-->
            <div id="content_2" class="content content2" style="display:none;">
            <h1><br/><br/>The content number 2</h1>
            <div style="clear: left;"></div>
        </div>
    
        </div>
        
    </body>
    </html>
    


    Tuesday, March 04, 2014 2:33 PM