Extending content after hiding the appbar

Question

Hi

I have an appbar in my application with an autohide. So if the user right clicks on the content, the appbar appears. Then I wrote a function that sets the content to 0px, in other words: when the appbar hides, the content extends from 72px to 0px to avoid an empty area at the bottom.

Is there a way, to have the content extended with a float or animation or something else, instead of just from 72px to 0px? It works fine, but it's not attractive.

Thanks

Answer 1

Sounds like a good case for CSS tansitions:

http://msdn.microsoft.com/library/ie/hh673535.aspx

Set the transition on the height, top or scale property. e.g.:

.myContent {
   height: 72px;
   -ms-transition: height 1s ease;
}

.shrink {
   height: 0;
}

Then, in your function, just do a WinJS.toggleClass on your content to add/remove the .shrink class to the .myContent element.

BTW, I believe the appbar is 88px tall.

Answer 2

Sounds like a good case for CSS tansitions:

http://msdn.microsoft.com/library/ie/hh673535.aspx

Set the transition on the height, top or scale property. e.g.:

.myContent {
   height: 72px;
   -ms-transition: height 1s ease;
}

.shrink {
   height: 0;
}

Then, in your function, just do a WinJS.toggleClass on your content to add/remove the .shrink class to the .myContent element.

BTW, I believe the appbar is 88px tall.

I've read the article and that's it indeed. But now the problem is, I'm extending the content in a .js file, and not in css. I'm doing it like this:

var bar = document.getElementById('myAppBar');
        if (bar != null) {
            bar = bar.winControl;
            bar.addEventListener("aftershow", function (e) {
                document.getElementById('content').style.bottom = "90px";
            });

I thought I can call -ms-transitions dynamically, but without any results.

Answer 3

I'm not sure if CSS transitions are supposed to work with direct programatic changes to the sytle attribute. When I do it I do it by adding or removing a css class.

If you're animating the "bottom" attribute did you make sure your tansition CSS property is set to animate that? E.g.:

 -ms-transition: bottom 1s ease;

Answer 4

Yes, it works. Thank you very much.

By the way, sorry for my late answer.