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

[narqo]

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):

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.

[Guria]

Could problem be solved with destruct method of popup, which will hide itself and self-destructs on animationend?

[narqo]

@Guria in my usecase, I don't want "to hide popup, before it would be destructed". I want "to destruct it after it was hidden".

Could problem be solved with destruct method of popup [..]

In think such method is more or less suitable for popup_target_position only, as popup_target_anchor can be destructed as a result of it's anchor destruction. I'd prefer to have more general (and more "native") API