Animation works well?

[HIRANO-Satoshi]

Hi,

I have updated Skeleton-Navigation-Polymer and sent a PR.

In the skeleton, page transition animation works for child-router.html but not for welcome.html, while animation works for both pages in the Aurelia's Skeleton-Navigation (if you uncomment aurelia-animation-css plugin in main.js).

I found animation did not work in many cases in aurelia-polymer environment. Since Material Design uses animation much, that is a major issue.

Any idea? Does anyone have a workaround?

I have setup two test branches.

https://github.com/HIRANO-Satoshi/skeleton-navigation-polymer-1/tree/animation-test
https://github.com/HIRANO-Satoshi/skeleton-navigation/tree/animation-test/skeleton-typescript

In the first test, animation works for repeat.for and animate(), but not for route-href to welcome.html.

     JSPM Installed Versions

                      github:github/fetch 1.1.1
              github:jspm/nodelibs-assert 0.1.0
              github:jspm/nodelibs-buffer 0.1.0
       github:jspm/nodelibs-child_process 0.1.0
                  github:jspm/nodelibs-fs 0.1.2
                github:jspm/nodelibs-path 0.1.0
             github:jspm/nodelibs-process 0.1.2
                github:jspm/nodelibs-util 0.1.0
                  github:jspm/nodelibs-vm 0.1.0
        github:roguePanda/aurelia-polymer 1.0.0-beta.1.0.3
               github:systemjs/plugin-css 0.1.32
              github:systemjs/plugin-json 0.1.2
              github:systemjs/plugin-text 0.0.8
                    github:twbs/bootstrap 3.3.7
                               npm:assert 1.4.1
                 npm:aurelia-animator-css 1.0.1
                      npm:aurelia-binding 1.1.1
                 npm:aurelia-bootstrapper 1.0.1
         npm:aurelia-dependency-injection 1.3.0
             npm:aurelia-event-aggregator 1.0.1
                 npm:aurelia-fetch-client 1.0.1
                    npm:aurelia-framework 1.0.8
                      npm:aurelia-history 1.0.0
              npm:aurelia-history-browser 1.0.0
                  npm:aurelia-http-client 1.0.4
                       npm:aurelia-loader 1.0.0
               npm:aurelia-loader-default 1.0.0
                      npm:aurelia-logging 1.0.0
              npm:aurelia-logging-console 1.0.0
                     npm:aurelia-metadata 1.0.0
                          npm:aurelia-pal 1.2.0
                  npm:aurelia-pal-browser 1.1.0
                         npm:aurelia-path 1.0.0
                    npm:aurelia-polyfills 1.1.1
             npm:aurelia-route-recognizer 1.0.0
                       npm:aurelia-router 1.1.1
                   npm:aurelia-task-queue 1.0.0 1.1.0
                   npm:aurelia-templating 1.2.0
           npm:aurelia-templating-binding 1.2.0
         npm:aurelia-templating-resources 1.2.0
            npm:aurelia-templating-router 1.0.1
                           npm:babel-core 5.8.38
                        npm:babel-runtime 5.8.38
                            npm:base64-js 0.0.8
                             npm:bluebird 3.4.1
                               npm:buffer 3.6.0
                              npm:core-js 1.2.7
                         npm:font-awesome 4.6.3
                              npm:ieee754 1.1.8
                              npm:indexof 0.0.1
                             npm:inherits 2.0.1
                              npm:isarray 1.0.0
                               npm:jquery 2.2.4
                      npm:path-browserify 0.0.0
                              npm:process 0.11.9
                                 npm:util 0.10.3
                        npm:vm-browserify 0.0.4
     

[bnavetta]

Hi @HIRANO-Satoshi, I'm no longer using Aurelia or Polymer, so unfortunately I'm not familiar enough with Polymer animation to know how to fix it.