This demo is impelemented to the tune of source code of can-animate
var oldRemove = can.remove;
can.remove = function (wrapped) {
var preventDefault = false;
can.each(wrapped, function(val) {
if (val.nodeType === 1) {
var v = $(val),
before;
if (before = can.data(v, '_beforeRemove')) {
preventDefault = true;
before(function(){
oldRemove.apply(can, [val])
});
}
}
});
if (preventDefault) {
return wrapped;
}
return oldRemove.apply(this, arguments);
};
can.view.attr('ui-animate', function (element, attrData) {
var el = $(element)
can.data(el, '_beforeRemove', function(cb){
el.addClass('animate-out')
setTimeout(function(){
cb()
}, 5000)
});
});
can.Component.extend({
tag: "demo-app",
template: 'Name: {{#if show}}<div ui-animate="some">{{name}}</div>{{/if}}',
scope: {
name: 'John Galt',
show: true
}
})
$("body").html(can.stache("<demo-app/>")({ }))
var scope = $('demo-app').scope()
setTimeout(function(){
scope.attr('show',false)
setTimeout(function(){
scope.attr('show',true)
}, 2000)
}, 2000)
div with name starts do dissapear as show set to false, animation (and removal) is not finished, and show is set to true again, then second instance of div shows up. Is it possible to implement that there would be only ONE instance of div?
I belive there is something sould be done on the helpers side.
http://jsfiddle.net/xKc3H/629/
This demo is impelemented to the tune of source code of can-animate
div
withname
starts do dissapear asshow
set tofalse
, animation (and removal) is not finished, andshow
is set totrue
again, then second instance ofdiv
shows up. Is it possible to implement that there would be only ONE instance of div?I belive there is something sould be done on the helpers side.