HTMX и collapse div, нестабильный переход

Я построил иерархию элементов, которая отображает все элементы, подпункты, подпункты, подпункты и так далее при нажатии на кнопку родительского элемента. Я использовал для этого htmx, и, кажется, он работает довольно хорошо. По крайней мере, работа выполняется. Моим желаемым конечным результатом была бы возможность построить настолько большую иерархию, насколько захочет пользователь, и которая все еще будет хорошо выглядеть и в которой будет приятно перемещаться. Теперь это практически разрушено плохим переходом.

Что я хотел бы исправить, так это переход коллапс-контейнера, в который рендерится подпункт. Сейчас он работает только при сворачивании, но не при разворачивании. Я полагаю, что рендеринг данных путает его, и когда контейнер расширяется, он просто появляется без какого-либо перехода. Когда данные есть, сворачивание и разворачивание работает как надо, и переход плавный.

Вот код:

{% if items %}
<ul class="list-group list-group-flush mt-3" id="items-list-group">
    <li class="list-group-item items-list-item">
    {% for item in items %}
        <button class="nav-link btn items-list-button" data-toggle="collapse" data-target="#collapse_{{ items.id }}"
        hx-get="/items/subitems-list/item={{ items.id }}"
        hx-target="#subitems-list_{{ items.id }}"
        hx-swat="innerHTML">{{ items.order }} {{ items.name }}</button>
            <div class="collapse" id="collapse_{{ items.id }}">
                <div class="container-fluid subitems-container" id="subitems-list_{{ items.id }}">
                </div>
            </div> 
    {% endfor %}
    </li>
</ul>
{% else %}
<div class="container-fluid mt-3">
    <span>No items</span>
</div> 
{% endif %}


{% if subitems %}
    <li class="list-group-item items-list-item">
    {% for subitem in subitems %}
    <button class="nav-link btn items-list-button" data-toggle="collapse" data-target="#collapse_{{ subitem.subitem.id }}"
        hx-get="/items/subitems-list/item={{ subitem.subitem.id }}"
        hx-target="#subitem-list_{{ subitem.subitem.id }}"
        hx-swat="innerHTML">{{ subitem.order }} {{ subitem.subitem.name }}</button>
        <div class="collapse" id="collapse_{{ subitem.subitem.id }}">
            <div class="container-fluid subitem-container" id="subitem-list_{{ subitem.subitem.id }}">
            </div>
        </div> 
    {% endfor %}
    </li>
{% else %}
    <span>No items</span>
{% endif %}

Есть ли что-то, на что можно указать, что я не понимаю, или это вообще правильный способ достичь того, что я пытаюсь?

Спасибо за помощь!

Я подозреваю, что переход работает, просто он завершается до того, как HTMX заменил данные, так что расширение незначительно.

Похоже, что вы используете bootstrap (или что-то подобное) для обработки перехода. Это хорошо, если там есть данные, но, очевидно, создает проблемы, если вы не хотите предварительно загружать все данные. Если загрузка всех данных является опцией, это решит проблему.

В противном случае, простая задержка перехода на bootstrap не будет отличным пользовательским опытом, увы.

Вы можете попробовать использовать HTMX для замены всего контейнера <div class="collapse" id="collapse_{{ items.id }}"> на другой с тем же id, но css-классом с собственным скользящим переходом

Это может потребовать изменения на hx-swap = "outerHTML" (и я думаю, что у вас там тоже опечатка - hx-swat)

В принципе, это метод HTMX, описанный здесь

В противном случае, если вы не против побаловаться с javascript, есть ответ, в котором говорится о задержке сворачивания bootstrap 4 здесь. Потенциально вы можете проверить пустой набор дочерних div и отложить сворачивание, если там ничего нет.

Вернуться на верх