bem / bem/bem-components

popup_theme_islands: visible-mod event fires before block's animation ends

Open
#1,448 2 comments 0 reactions 0 assignees View on GitHub
JS question
Dominant language
JavaScript
Stars
330
Forks
88
PR merge metrics
No merged PRs in 30d

Description

We use CSS animation to visualise the process of setting / removing `visible` modifier of the block. This brings some sort of inconsistency in block's behaviour: modifier based events are always synchronous, while CSS animation is asynchronous.

In cases when you need to remove `popup` (or `modal`) after it was hidden, you can't just add `{ modName: 'visible', modVal: '' }` event listener and remove blocks from DOM. You need to do weird things such as add additional listener to `animationend` event and remove block after it would be fired from CSS.

Here is an example which illustrate the problem (and the solution):

``` js
BEMDOM.decl('some-block', {
onSetMod : {
'js' : {
'inited' : function() {
this._popup.on({ modName : 'visible', modVal : '' }, this._onPopupHide, this);
}
}

_onPopupHide() {
this._popup.domElem.one('animationend', this._onPopupHideFinaly);
}

_onPopupHideFinaly() {
BEMDOM.descturct(this._popup.domElem);
}
});
```

We definitely need to do something here, as such API looks ridiculous.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.