A JS class for setting CSS animation / transition listeners

CSS animation and transition listeners

var CSSListeners = function(opts) {
        this._init(opts);
    };
    CSSListeners.prototype.addEvent = function(el, cb) {
        var self = this;
        el.addEventListener(this.prefix, cb, false);
    };
    CSSListeners.prototype.removeEvent = function(el, cb) {
        var self = this;
        el.removeEventListener(this.prefix, cb, false);
    };
    CSSListeners.prototype.setPrefix = function() {
        var div = document.createElement('div');
        for(prefix in this.prefixes) {
            if(this.prefixes.hasOwnProperty(prefix)) {
                if (prefix in div.style) {
                    return this.prefixes[prefix];
                }
            }
        }
    };
    CSSListeners.prototype._init = function(opts) {
        var self = this;
        this.opts = opts;
        // By default we shall set up animation end listeners.
        this.type = this.opts.type || 'animation';
        // Set up the prefixes to default to the animation end browser prefixes.
        this.prefixes = this.opts.prefixes || {
            'WebkitAnimation': 'webkitAnimationEnd',
            'OAnimation': 'oanimationend',
            'MsAnimation': 'MSAnimationEnd',
            'animation': 'animationend'
        };
        this.prefix = this.setPrefix();
        return this;
    };

// Set up the object to listen to transitionEnd events.  
var transitionEnd = new CSSListeners({
        type: 'transition',
        prefixes: {
            'transition':       'transitionEnd',
            'MozTransition':    'transitionend',
            'OTransition':      'oTransitionEnd',
            'WebkitTransition': 'webkitTransitionEnd',
            'msTransition':     'MSTransitionEnd'
        }
    }),
    // Listen out for animation start events.
    animationStart = new CSSListeners({
        type: 'animation',
        prefixes: {
            'WebkitAnimation': 'webkitAnimationStart',
            'OAnimation': 'oanimationstart',
            'MsAnimation': 'MSAnimationStart',
            'animation': 'animationstart'
        }
    }),
    // Listen out for animation iteration events.
    animationIteration = new CSSListeners({
        type: 'animation',
        prefixes: {
            'WebkitAnimation': 'webkitAnimationIteration',
            'OAnimation': 'oanimationiteration',
            'MsAnimation': 'MSAnimationIteration',
            'animation': 'animationiteration'
        }
    }),
    // Listen out for animation end events.
    animationEnd = new CSSListeners({
        type: 'animation',
        prefixes: {
            'WebkitAnimation': 'webkitAnimationEnd',
            'OAnimation': 'oanimationend',
            'MsAnimation': 'MSAnimationEnd',
            'animation': 'animationend'
        }
    }),
    foo = document.getElementById('foo');
// Set up a listener on the foo element and pass the named callback function.
// Passing the callback named means we can remove it from within itself.
transitionEnd.addEvent(foo, function bar() {
    // Once the callback is triggered remove the event listener.
    transitionEnd.removeEvent(foo, bar);
});