zackbrown
commented
10 years ago What's happening here is a versioning issue: the tagged demo project was build to track F/A 0.0.11. There were some significant optimizations in 0.0.13 that required minor changes to the supported syntax of fa-modifier attributes, but in this case there was a breaking changes.
I built the demo project in one place using one of the syntaxes that's no longer supported as of 0.0.13 (the part in partials/main.html where fa-modifier's fa-scale is set to "[widthTransitionable, heightTransitionable]" — arrays of transitionables aren't supported, but there are plenty of alternatives, the simplest of which would be to use an array of expressions: fa-scale="[widthTransitionable.get(), heightTransitionable.get()]")
So the good news is it's easy to fix if you're willing to change a few characters manually, as described above. Unfortunately, the tagged demo model is pretty brittle to pushing out changes. In fact, I built the demo part of this in an evening to show at the HTML5 Dev Conf a couple weeks back, and it was not intended to be a long-standing (nor supported) demo. I'm going to remove the mention of the tags from the readme for this reason. We're working on publishing a Famo.us University course that will be a much better educational walkthrough than this temporary solution.
If you would like more robust examples to look through, the currently supported demos are in the https://github.com/thomasstreet/famous-angular-examples repo. The #/lock-screen and #/animations routes have some pretty thorough examples.
On my system, I am only able to see the opacity transitions. On inspection with the Chrome developer tools, I see that the action and callback queues of widthTransitionable and heightTransitionable are simply growing, while the current action remains stuck. I also have:
The opacity transition is never kicked off, but this transition can be run in isolation successfully.