Как анимировать шаблоны canjs

Question

Кто-нибудь может объяснить, как анимировать шаблоны усов? Я слежу за документацией по анимации canjs, которую я скачал здесь. Я добавил в мой файл app.js. Итак, как я могу загрузить этот файл в приложении?

Я написал этот код в моем шаблоне, но он не работает.

<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;
});

Я использую requirejs для поддержки AMD и пытаюсь загрузить can-animate в мой файл requirejsconfig. Я сохранил свой файл can-animate.js в файле canjs/amd-dev/can/can-animate/src/lib.

Может ли кто-нибудь дать мне полный пример анимации элементов DOM, используя его?

Answer 1

В CanJS 4.0 вот как вы можете это сделать (используя jQuery в качестве библиотеки анимации, вы можете выбрать любую другую):

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

Тогда в вашем шаблоне:

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

Answer 2

Вы должны использовать:

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

Смотрите демонстрационную страницу.