Skip to content

Magento 2.4.7 How to open mini-search input field slow? (transition delay)

I can’t find to edit the time to open the mini-search input field. All classes I added transition, does not have any effect. The default opening effect is so baaaam and I want to open it slow.
I also try to use in input id=”search”:

data-toggle="collapse"

but it show no changing.

<div class="block block-search">
<div class="block block-title"><strong><?= $escaper->escapeHtml(__('Search')) ?></strong></div>
<div class="block block-content">
    <form class="form minisearch" id="search_mini_form"
          action="<?= $escaper->escapeUrl($helper->getResultUrl()) ?>" method="get">
        <?php  if (!empty($queryParams = $additionalSearchFormData->getFormData())): ?>
            <?php foreach ($queryParams as $param): ?>
                <input type="hidden" name="<?= $escaper->escapeHtmlAttr($param['name']) ?>"
                       value="<?= $escaper->escapeHtmlAttr($param['value']) ?>"/>
            <?php endforeach; ?>
        <?php endif; ?>
        <div class="field search">
            <label class="label" for="search" data-role="minisearch-label">
                <span><?= $escaper->escapeHtml(__('Search')) ?></span>
            </label>
            <div class="control">
                <input id="search"
                       data-mage-init='{
                        "quickSearch": {
                            "formSelector": "#search_mini_form",
                            "url": "<?= /* @noEscape */ $quickSearchUrl ?>",
                            "destinationSelector": "#search_autocomplete",
                            "minSearchLength": "<?= $escaper->escapeHtml($helper->getMinQueryLength()) ?>"
                        }
                    }'
                       type="text"
                       name="<?= $escaper->escapeHtmlAttr($helper->getQueryParamName()) ?>"
                       value="<?= /* @noEscape */ $helper->getEscapedQueryText() ?>"
                       placeholder="<?= $escaper->escapeHtmlAttr(__('Search entire store here...')) ?>"
                       class="input-text"
                       maxlength="<?= $escaper->escapeHtmlAttr($helper->getMaxQueryLength()) ?>"
                       role="combobox"
                       aria-haspopup="false"
                       aria-autocomplete="both"
                       autocomplete="off"
                       aria-expanded="false"/>
                <div id="search_autocomplete" class="search-autocomplete"></div>
                <?= $block->getChildHtml() ?>
            </div>
        </div>
        <div class="actions">
            <button type="submit"
                    title="<?= $escaper->escapeHtml(__('Search')) ?>"
                    class="action search"
                    aria-label="Search"
            >
                <span><?= $escaper->escapeHtml(__('Search')) ?></span>
            </button>
        </div>
    </form>
</div>

Do you have any ideas to get it? What can I do?

Many thanks, in advance.