如何为CanJS模板添加动画效果

Question

有人能解释一下如何动画化mustache模板吗？ 我正在按照canjs animation的文档进行操作。 我已经从这里下载了animate。我已将其添加到我的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元素吗？

- Dipesh Raichana

---

请问您可以将它添加到JSfiddle上吗？ - Sumodh S

@Sumodhkrishna：添加了我的代码。 - Dipesh Raichana

看起来你的标签缺少动画效果。尝试使用这个：<ul can-animation-fade-out="fast" can-animation-fade-in="slow"> - Fionna

@FionnaChan：谢谢，但它没有起作用。 - Dipesh Raichana

Answer 1

在CanJS 4.0中，以下是您可能会这样做的方式（使用jQuery作为动画库，您也可以选择其他库）：

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

然后在你的模板中：

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

- Justin Meyer

Answer 2

你应该使用：

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

请查看演示页面。

- Jeroen

---

你能在CanJS控制器中使用RequireJS创建一个示例吗？这样我就能更清楚地理解了。 - Dipesh Raichana