A Brief Overview...
Take a look at the HTML structure below:
<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>
To manage the items without JavaScript, I have assigned classes like above, active, and below to define their state.
above- reduces the size of the.itemand moves it backactive- adds transitions when moving fromaboveorbelowbelow- positions theitembelow
In CSS, it is represented as:
.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%);
}
The Issue
Using JS, I update the classes of items above .item.active to above and below to below based on the active index. This method works smoothly when moving by one item, like 1 -> 2, 4 -> 3. However, if the active index changes by more than one, the transition becomes glitchy as each .above item transitions to .below and vice versa.
My Inquiry
Is there a way to only trigger transitions in the following scenarios:
.activeto.above- transition.activeto.below- transition.aboveto.active- transition.belowto.active- transition.aboveto.below- NO transition.belowto.above- NO transition
Attempted Solutions
I experimented with the following CSS:
.item {
/* Other styles... */
/*transition: transform .8s ease;*/
}
item.active {
/* Moved the transition here */
transition: transform .8s ease;
}
However, this approach led to:
.activeto.above- No transition occurred.activeto.below- No transition occurred.aboveto.active- Smooth transition.belowto.active- Smooth transition.aboveto.below- No transition.belowto.above- No transition