Preload image by adding Poppy to DOM on init

[saltymouse]

Here's a proof-of-concept for preloading the image by inserting the Poppy element upon instantiation.

• I've moved the show() method to init() which will run upon each new Poppy().
• The show() method now un-hides the Poppy element with a CSS transition animation.
• The close() method animates the Poppy element out of view, then destroys the element.

I updated example in index.html that follows the new methods outlined above, so please take a look. I don't know if this is the best way to implement it, so please give your feedback! Thanks!

[apvarun]

I'm not sold on the idea of initializing it on DOM before actually displaying it. Although this enables to have a transition, this would add unnecessary DOM elements without even displaying it.

Also, there is possibility that we wouldn't clean up these elements from the DOM if show/hide isn't called at all. And, for a use-case of such a pop-in message box, I don't think we would show it on page load. It would be show on state changes, new notifications, messages post page loading or on scroll.

Let's create an issue and get more opinions on the same to proceed.