Переходы Vue. Переход по триггеру для вложенного перехода

Question

Я пытаюсь запустить переход для выхода из группы переходов, вложенной в другой переход. Когда он появляется, активный класс fadeInLeft работает правильно, но я также хочу активировать fadeOutRight при изменении фильтра.

Список фильтров представляет собой многомерное дерево массивов.

<transition>
    <transition-group
        appear
        class="filterList"
        enter-active-class="fadeInLeft"
        leave-active-class="fadeOutRight"
        style="animation-duration: 1s"
        tag="div"
        v-if="selectedFilter"
        :key="selectedFilter.id"
    >
        <div
            v-for="filter in selectedFilter.children"
            class="listItem d-flex justify-content-between align-items-center"
            @click="toggleFilter(filter)"
            :key="filter.id"
        >
            <span>{{filter.name}}</span>
        </div>
    </transition-group>
</transition>

.....

<script>
    export default {
        methods: {
            toggleFilter(filter) {
                if (filter.children.length) {
                    this.selectedFilter = filter;
                    return 0;
                }
            .....
            }
        }
    }
</script>

<style lang="scss">
    .filterList {
        position: absolute;
        top: 0;
        left: 0;

        .listItem {

            padding: 15px 25px;
            border-top: 1px dashed #979797;
            @for $i from 1 to 20 {
                &:nth-child( #{$i}) {
                    animation-delay: $i * 0.1s;
                }
            }
        }
    }

    ....
</style>