Html 仅在类A和类B以及类A和类C之间进行转换，而不在类B和类C之间进行转换 有点背景。。。

考虑以下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，基于

active

索引，我只是更新类以反映

.item.active上面的所有项，上面的类是
，下面的类是

当通过1项（例如1->2，4->3等）导航时，此功能非常有效。但是，当活动索引更改超过1（例如1->3，4->1等）时，转换非常容易，因为在幕后，上面的
项都转换为
。下面的
项，反之亦然

我的问题
是否可以仅在以下场景中应用转换：


.active
到上面的
。
-转换
.active
到
下面的
-转换

.over
到
.active
-转换
.below
到
.active
-转换
。上面
到下面
-不要转换
.below
到
.below
-不要转换

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

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

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

这导致：


.active
到上面的
。
-未转换
.active
到
下面的
-未转换

.over
到
.active
-转换
.below
到
.active
-转换
。上面
到下面
-不要转换
.below
到
.below
-不要转换
通过添加一个额外的类来实现这一点，比如说，
.transition
，它具有
transition
属性集。如果需要转换，请仅添加此类，否则将其删除

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

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