how to animate canjs templates

Question

Can anyone explain How to animate mustache templates? I am following the documentation from canjs animation I have downloaded animate from here. I have added to my app.js file. So how can I load that file in application?

I have written this code in my template but it doesn't work.

<div>
<ul can-animate-fade-out="fast" can-animate-fade-in="slow">
   <li>Hello</li>
   <li>I am learning</li>
   <li>javascript</li>
</ul>
</div> 

define(['can', 'jquery','animate'], function (can, $, animate) {
  var Animate = can.Control.extend({
    defaults: { }
  }, {
    init: function() {
        console.log('javascript initialised');
    }
  });
  return Animate;
});

I am using requirejs for AMD support and trying to load can-animate in my requirejsconfig file. I have stored my can-animate.js in canjs/amd-dev/can/can-animate/src/lib.

can anyone give me full example of animating DOM elements using it?

Answer 1

In CanJS 4.0, here's how you might do it (using jQuery as an animation library, you can pick any other):

stache.registerHelper("fadeIn", function(){
  return function(element){
    $(element).fadeIn();
  }
})

Then in your template:

<div on:click="fadeIn()">

Answer 2

You should use:

can-animate-fade-in="fast".  

See the demo page.