Vue.js过渡组无法正常工作

Question

我有一个带有以下模板的Vue.js组件：

<div class="ca-protocol-card--expandable" :class="{'is-expanded': isExpanded}">
        <transition-group appear name="protocolFadeHeight" mode="out-in" tag="div">
            <protocol-card @click.native="toggle" key="false" :protocol="protocol" :theme="getTheme"></protocol-card>
            <div class="ca-grid ca-grid--right ca-col-11" v-if="isExpanded" key="true">
                <expandable-task-card
                    v-for="task, index in taskList"
                    viewType="dashboard"
                    :key="index"
                    :task="task"
                    :taskList="taskList"
                    @taskCardExpanded="onTaskCardExpand"></expandable-task-card>
            </div>
        </transition-group>
    </div>

它的主要行为是这样的： -默认情况下，只有ProtocolCard应该是可见的。 -如果您单击该卡，它会展开，并且ExpandableTaskCards也将变为可见。 -我想使高度淡入平滑（它使用的是max-height，而不是实际的高度），这就是为什么我使用transition-group。

该过渡仅应用于第一个组件，而不应用于所有其他组件。为什么会发生？我该怎么办？