javascript - 如何为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 并尝试在我的 requirejsconfig 文件中加载 can-animate。我已将我的 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".  

请参阅演示页面。