仅在 类 A 和 B、A 和 C 之间转换，但不在 B 和 C 之间转换

Question

一些背景知识...

考虑以下 HTML 结构：

<div class="wrapper">
    <div class="item above"></div>
    <div class="item active"></div>
    <div class="item below"></div>
    <div class="item below"></div>
    <div class="item below"></div>
</div>

为了避免使用JS，我使用了以下classes的组合来定义item的状态； above, active, below.

• above - 向下和向后缩放 .item
• active - 从 above 或 below
转换 .item
• below - 将 item 置于首屏下方

在 CSS 中，这看起来像：

.wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.item {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: transform .8s ease;
    will-change: auto;
}

item.above {
    transform: scale(.8);
}

.item.below {
    transform: translateY(100%);
}

问题

使用 JS，基于 active 索引，我只是更新 classes 以反映 .item.active 以上的所有项目，使 class 为 above 和以下所有人的 class 为 below...

这在按 1 项目导航时非常有效，例如1 -> 2、4 -> 3 等。但是，当活动索引的变化超过 1（例如 1 -> 3、4 -> 1 等）时，过渡非常出现故障，因为在幕后每个 .above 项目都在过渡到 .below，反之亦然。

我的问题

是否可以仅在以下情况下应用转换：

• .active 到 .above - 过渡
• .active 到 .below - 过渡
• .above 到 .active - 过渡
• .below 到 .active - 过渡
• .above 到 .below - 不要转换
• .below 到 .above - 不要转换

我试过的

我知道这行不通，但我尝试了以下方法：

.item {
    /* Other styles... */
    /*transition: transform .8s ease;*/
}

item.active {
    /* Moved the transition here */
    transition: transform .8s ease;
}

这导致：

• .active 到 .above - 不过渡
• .active 到 .below - 不过渡
• .above 到 .active - 过渡
• .below 到 .active - 过渡
• .above 到 .below - 不要转换
• .below 到 .above - 不要转换

Answer 1

通过添加一个额外的 class 来做到这一点，比如 .transition，它具有 transition 属性 集。如果你想要转换，只添加这个 class，否则删除它。