How can I change the script so that when a new click is made, the invisible block is first visible?

Question

JavaScript

Given: Magento2, various messages on the page (about adding a product to the cart, to compare, to the wishlist, etc.).
By default, all messages continue to hang on the page until it is reloaded.
I found an article in which just what I need is the template and the js file are edited so that these messages are automatically hidden after a specified time.
Everything works if the displayed message is preceded by a page reload.
However, adding to the basket works without reloading the page, so the whole thing works only the first time, then the message about the new addition remains invisible.
I see that the message block is forcibly hidden in the code - $(self.selector).hide();, and if the page is not reloaded, then this block remains display:none; I understand that I need to clear it first, add it first by the show() event - I seem to see where, but no, I’m apparently doing something wrong.
Code from article
template

<div data-bind="scope: 'messages'">
  <div data-bind="visible: isVisible(), click: removeAll">
    <!-- ko if: cookieMessages && cookieMessages.length > 0 -->
    <div role="alert" data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
      <div data-bind="attr: {
            class: 'message-' + message.type + ' ' + message.type + ' message',
            'data-ui-id': 'message-' + message.type
        }">
        <div data-bind="html: message.text"></div>
      </div>
    </div>
    <!-- /ko -->
    <!-- ko if: messages().messages && messages().messages.length > 0 -->
    <div role="alert" data-bind="foreach: { data: messages().messages, as: 'message' }" class="messages">
      <div data-bind="attr: {
            class: 'message-' + message.type + ' ' + message.type + ' message',
            'data-ui-id': 'message-' + message.type
        }">
        <div data-bind="html: message.text"></div>
      </div>
    </div>
    <!-- /ko -->
  </div>
</div>
<script type="text/x-magento-init">
  { "*": { "Magento_Ui/js/core/app": { "components": { "messages": { "component": "Magento_Theme/js/view/messages" } } } } }
</script>

javascript

define([
    'jquery',
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'underscore',
    'jquery/jquery-storageapi'
], function ($, Component, customerData, _) {
    'use strict';

    return Component.extend({
        defaults: {
            cookieMessages: [],
            messages: [],
            isHidden: false,
            selector: '.page.messages .messages',
            listens: {
                isHidden: 'onHiddenChange'
            }
        },

        /**
         * Extends Component object by storage observable messages.
         */
        initialize: function () {
            this._super();

            this.cookieMessages = $.cookieStorage.get('mage-messages');
            this.messages = customerData.get('messages').extend({
                disposableCustomerData: 'messages'
            });

            // Force to clean obsolete messages
            if (!_.isEmpty(this.messages().messages)) {
                customerData.set('messages', {});
            }

            $.cookieStorage.set('mage-messages', '');

        },

        initObservable: function () {
            this._super()
                .observe('isHidden');

            return this;
        },

        isVisible: function () {
            return this.isHidden(!_.isEmpty(this.messages().messages) || !_.isEmpty(this.cookieMessages));
        },

        removeAll: function () {
            $(self.selector).hide();
        },

        onHiddenChange: function (isHidden) {
            var self = this;

            // Hide message block if needed
            if (isHidden) {
                setTimeout(function () {
                    $(self.selector).hide();
                }, 5000);
            }
        }
    });
});

Answer 1

In principle, it was decided, here is the corrected code.
Everything works fine, the only thing is that they added an animation with animate.css - it appears on the right and goes there.
In cases where a message is added after a page reload, for example, add for comparison, the message appears on the right, goes to the right, then again the same message in the same order. Those. duplicated.
I tried to replace it with another animation, for example, fadeOut, - the same effect, duplicated ...
Without animation, everything is fine. Although a smooth hide like opacity animation wouldn't hurt..