Animation


Use the animation option via JavaScript to decide wether the methods

  • .open()
  • .hide()
  • .show()

from the API or the animation for the popup modal does exist or not. Via data attributes, the option is called data-animation.

<div class="container">
    <div class="d-flex justify-content-start align-items-center m-4">
        <button type="button" class="btn btn-outline-primary me-2" id="select-animation-hide">Hide</button>
        <button type="button" class="btn btn-outline-primary ms-2" id="select-animation-show">Show</button>
    </div>
    <select multiple="multiple" id="select-animation">
        <option value="Banana">Banana</option>
        <option value="Apple">Apple</option>
        <option value="Orange">Orange</option>
        <option value="Lemon" selected="selected">Lemon</option>
        <option value="Pepper">Pepper</option>
        <option value="Mushrooms">Mushrooms</option>
        <option value="Cabbages">Cabbages</option>
        <option value="Celery">Celery</option>
        <option value="Garlic">Garlic</option>
        <option value="Brocoli">Brocoli</option>
    </select>
</div>

let select = new betterNiceSelect.BetterNiceSelect("#select-animation", { animation: false });

document.querySelector("#select-animation-hide").addEventListener("click", function () {
    select.hide());
});

document.querySelector("#select-animation-show").addEventListener("click", function () {
    select.show();
});