canjs / can-animate

animation view helpers
MIT License
4 stars 1 forks source link

animation with helper: keep content if removal animation not finished #2

Open wclr opened 9 years ago

wclr commented 9 years ago

http://jsfiddle.net/xKc3H/629/

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.