Библиотека готовых 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');
}
}
}
}));
});