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>