Библиотека готовых CSS-анимаций для БЭМ-платформы, основанная на Animate.CSS. Портирована для тех, кто не хочет каждый раз настраивать анимации вручную.

Прятной разработки! ;)

Подключение

на примере project-stub

Шаг №1

bower install bem-contrib/bem-animations --save

Шаг №2

в .enb/make.js подключить уровни

const levels = [
    // ...другие уровни
    { path : 'libs/bem-animations/@common', check : false }
]

Использование

Шаг №1

Подключить нужную анимацию в deps.js блока (my-block/my-block.deps.js)

[{
    shouldDeps : [
        { 
            block : 'animation', 
            mods : { type : 'fade-in-down' } 
        }
    ]
}]

Шаг №2

Примиксовать блок анимации в BEMTREE/BEMHTML

{
    block : 'my-block',
    mix : [{ block : 'animation' }]
}

Шаг №3

Подключить (необходимо только в bem-core@v4) в YModules, и использовать блок анимации в i-bem

modules.define('my-block',
    ['i-bem-dom', 'animation'],
    function(provide, bemDom, Animation) {

provide(bemDom.declBlock(this.name, {
    onSetMod : {
        js : {
            inited : function() {
                const anim = this.findMixedBlock(Animation);
                
                anim.start('fade-in-down');
            }
        }
    }
}));

});