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?

can you please add it as a JSfiddle? – Sumodh S Sep 12 '15 at 08:29 — Sumodh S, Sep 12 '15 at 08:29
@Sumodhkrishna: added my code. – Dipesh Raichana Sep 12 '15 at 09:55 — Dipesh Raichana, Sep 12 '15 at 09:55
looks like lacking -animation- in your tag. try this:
– Fionna Sep 13 '15 at 09:08 — Fionna, Sep 13 '15 at 09:08
@FionnaChan: thanx but its not working – Dipesh Raichana Sep 13 '15 at 11:53 — Dipesh Raichana, Sep 13 '15 at 11:53

score 0 · Answer 1 · edited Mar 16 '16 at 18:22

0

You should use:

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

See the demo page.

edited Mar 16 '16 at 18:22

answered Sep 14 '15 at 14:52

Jeroen

1

1

can you create an example with requirejs in canjs controller? so that I can get it clearly. – Dipesh Raichana Sep 16 '15 at 05:03

score 0 · Answer 2 · answered Apr 13 '18 at 19:52

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()">

how to animate canjs templates

2 Answers2