How to properly destroy the mojs object after a Burst animation has finished playing?

[Darko]

What is the best way to properly destroy the DOM element after an animation has finished playing?
I saw a .then method in the API but doesn't seem to be doing anything.

Sorry if this was asked before, or if there's already something in the API, I couldn't find anything 😩

[legomushroom]

Hey @Darko, thanks for the issue!

Can you tell me more about your intentions, so I can help with the best solution for you?
In case you just want to remove the DOM object it is actually accessible thru the .el property on the Burst instance, so if you have a deleteEl function you can do something like:

// function to remove DOM node
var function deleteEl(el) {
  if (el) {
       el.parentNode.removeChild(el);
  }
}

deleteEl(burst.el);

But I suspect you want to do something different, so please share your intents.

[Darko]

Wow that was a really fast response 😄
In an angularjs app, I have a star rating system. What I did was, whenever you click on a star to rate the resource, a burst animation triggers. The thing is, I'm using angular's $event object that's provided on ng-click and every time you click, I create a new burst object because not always people will click on the same star. I noticed that whenever I do that, even if I click on the same star it creates a new DOM element, which is logically correct. What I want to do is to listen for the animation end, and whenever it's done playing – to remove the DOM element.

Is there a proper way to do this, or I'd need to figure out the duration of the animation and then using $timeout to remove the element?

[legomushroom]

I see this makes sense. In the best case, you would create just one burst instance and then reuse it with help of the tune method which allows you to tune the instance's parameters to your needs. No need to create new burst on each click:

// instead, create one burst instance
const burst = new mojs.Burst({});

// on click
buttonEl.addEventListener('click', function(e) {
  // tune burst's `x` and `y` to event's `x` and `y`
  burst.tune({ x: e.pageX, y: e.pageY })
  // replay it
  .replay();
});

There is a small demo with the code snippet above.

In your case, you can have 5 burst instances - one for each star.
Please let me know if you have more question.

[legomushroom]

Alternatively, you can just set parent property to a star's DOM element (which will place the bust instance inside the star) and just call the replay() method on each click:

const burst = new mojs.Burst({
  parent: starEl // send the burst inside start
});

starEl.addEventListener('click', function() {
 burst.replay();
});

Demo.

[Darko]

I ended up doing this:

function playAnimation(props) {
      const animation = new Timeline();
      _.each(props, prop => {
        animation.add(prop);
      })

      animation.play();

      const cleanup = $timeout(() => {
        _.each(props, prop => {
          prop.el.parentNode.removeChild(prop.el)
        })
      }, 700); // 700 because the animation ends under 700ms
}

[xavierfoucrier]

May be it would be cool to have a function like destroy(), or a parameter like destroyOnComplete that will be checked just before the onComplete callback to automatically remove the element from the DOM when the animation is complete.

Link to a current workaround:
#62 (comment)