仅在 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，我使用了以下类的组合来定义物品的状态； 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 索引，我只是更新类以反映.item.active 上方的所有项目以具有above 的类和所有低于below 的类...

这在通过 1 项导航时非常有效，例如1 -> 2, 4 -> 3 etc. 但是，当活动索引变化超过 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

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