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

Кто-нибудь может объяснить, как анимировать шаблоны усов? Я следую документации из анимации 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 с его использованием?


javascript animation canjs canjs-view
person Dipesh Raichana    schedule 09.09.2015    source источник
comment
не могли бы вы добавить его как JSfiddle?   -  person Sumodh S    schedule 12.09.2015
comment
@Sumodhkrishna: добавил мой код.   -  person Dipesh Raichana    schedule 12.09.2015
comment
похоже, в вашем теге отсутствует -animation-. попробуйте это: ‹ul can-animation-fade-out=fast can-animation-fade-in=slow›   -  person Fionna    schedule 13.09.2015
comment
@FionnaChan: спасибо, но это не работает   -  person Dipesh Raichana    schedule 13.09.2015

Ответы (2)


arrow_upward
0
arrow_downward

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

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

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

person Jeroen    schedule 14.09.2015
comment
Вы можете создать пример с requirejs в контроллере canjs? так что я могу получить это ясно. - person Dipesh Raichana; 16.09.2015

arrow_upward
0
arrow_downward

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

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

Затем в вашем шаблоне:

<div on:click="fadeIn()">
person Justin Meyer    schedule 13.04.2018