canjs / can-animate

animation view helpers
MIT License
4 stars 1 forks source link

Strategy for including a global animations configuration #8

Open mickmcgrath13 opened 7 years ago

mickmcgrath13 commented 7 years ago

Currently, we have to specify mixins and global props like this:

var Scope = can.Map.extend({
    animateOptions: {
        "mixins": {
            "fade": function(opts){
                if(opts.propertyIdentifier === "inserted" || !opts.$el.is(":visible")){
                    opts.$el.hide().fadeIn(opts.duration);
                }else if(opts.propertyIdentifier === "removed" || opts.$el.is(":visible")){
                    opts.$el.fadeOut(opts.duration);
                }
            }
        },
        "duration": 2000,
        "bindings":{
            "$inserted": "fade",
            "$removed": "fade"
        }
    }
});

but it'd be nicer to somehow "register" animations and not have to specify mixins for everything so that we could just do something like:

import 'my-project/can-animate-mixins';
var Scope = can.Map.extend({
    animateOptions: {
        "bindings":{
            "$inserted": "fade",
            "$removed": "fade"
        }
    }
});

where my-project/can-animate-mixins.js would 'register' the fade animation object as well as the global duration