Angular UI Router with Polymer - Animated transitions possible?

1
votes

am I the only one who would love to see angular's UI router work with polymer's page transitions? I know there's a router for polymer but I would argue that it is not as friendly/mature as that for angular. (and we like angular for everything else it does well, too)

So, here I am trying to use core-animated-pages with a section for different ui-views. I am hoping that someday I can do a transition between them.

http://plnkr.co/edit/tYyuKLO1O5JQVtpNg9Th?p=preview

I'm using the ng-polymer-elements module for which we have GabiAxel to thank: https://github.com/GabiAxel/ng-polymer-elements

The question is - can I bind the selected attribute (page in the demo) to the state? At least, that's my first approach. Any help/suggestions would be much appreciated. Happy new year.

2
angularjspolymerangular-ui-router

2 Answers

0
votes

You just need to set the core-animated-pages's selected with the div that you want to show.

For example, when you click the about link, you want to call goToAbout and set the selected to 1.

<div class="container">
    <core-animated-pages id="pages" transitions="hero-transition slide-up slide-down cross-fade list-cascade">

      <div ui-view></div>

      <div ui-view="about"></div>

    </core-animated-pages>
</div>

<script>
  function goHome() {
    var pages = document.getElementById('pages');
    pages.selected = 0;
  }

  function goToAbout() {
    var pages = document.getElementById('pages');
    pages.selected = 1;
  }
</script>

And then you just need to apply the animation attributes to elements you want to animate inside each partial html, for example -

<div class="jumbotron text-center" cross-fade>
    <h1 slide-down>The About Page</h1>
    <p slide-down>This page demonstrates <span class="text-danger">multiple</span> and <span class="text-danger">named</span> views.</p>
</div>

I have modified your sample a little bit and you can find a working copy here.

0
votes

If you have an element like:

<core-animated-pages id="headerPage" selected="0" transitions="hero-transition">

You can access it in angularjs as:

var headerPage = document.querySelector('core-animated-pages[id="headerPage"]');

And then set its selected field as:

headerPage.selected=1;