My team at work is currently porting an e-commerce SPA from an older framework over to Brunch with Panache (BWP), our open source development framework for web clients. Like the old framework, BWP uses both Backbone and CoffeeScript. But to make composing applications easier BWP kicks it up a notch and adds in Chaplin, giving us Collection Views.
After a quick look through Chaplin.CollectionView I noticed a property called
useCssAnimation. The default value of this property was set to
false. Time to search GitHub for some inspiration…
A quick search for
"useCssAnimation:" resulted in a number of hits. But one of them in particular caught my eye, because I recognized it was using a library I’d been experimenting with called animate.css. And I knew testing it out would be a cinch.
Given BWP is geared for developer productivity, here’s all that was needed to make the switch to use animate.css to replace the JS-based
CollectionView animation behavior:
jake watch:devrunning (and nginx pointing at the app’s
- Run a
bower install --save animate.css
collection-view.coffeeand add the following two properties to the object prototype:
useCssAnimation: true # flag to enable use of CSS animations animationStartClass: "animated fadeIn" # provides CSS fade-in animation