avasuro/marionette-css-animated-region

Animated region for Backbone.Marionette, based on native css transitions

Animated region for Backbone.Marionette, based on native css transitions

How to install:

npm install marionette-css-animated-region

Browser:

<script src="backbone.js" type="text/javascript"></script>
<script src="backbone.marionette.js" type="text/javascript"></script>
<script src="marionette-css-animated-region.js" type="text/javascript"></script>

Common JS:

var CSSAnimatedRegion = require('marionette-css-animated-region');

ES6:

import CSSAnimatedRegion from 'marionette-css-animated-region';

How to use

var SomeViewConstructor = Marionette.View.Extend({
    regions: {
        animated: {
            el: '.region-selector',
            regionClass: CSSAnimatedRegion,
            state: {
                shown: {
                    opacity: 1
                },
                hidden: {
                    opacity: 0
                },
                animationDuration: 200,
                animationFunction: 'ease'
            }
        }
    }
})

For more information see examples in this repo.