README.md

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

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

Подключение

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

Шаг №1

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

Шаг №2

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

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

Если используется bem-core@v4, необходимо подключить ещё один уровень.

{path: 'libs/bem-animations/@bem-core-v4', check: false}

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

на примере bem-core@v4

Шаг №1

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

({
  mustDeps: [
    {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() {
          this._animation = this.findMixedBlock(Animation);
          this._animation.setMod('type', 'fade-in-down');
        }
      }
    }
  }));
});