I am in the process of developing a slider element that consists of only 2 items. My goal is to ensure that these items smoothly slide back and forth to the left and right when I click on the back or next button. While everything functions correctly when I click next, and the elements scroll and fade seamlessly, an issue arises when I click back. No matter what actions I take, the first element seems to jump ahead in time. To better illustrate this problem visually, please refer to the following gif:
https://i.stack.imgur.com/5hvZT.gif
For further details, you can view the code snippet on JSFiddle - http://jsfiddle.net/eywraw8t/273583/
The CSS code responsible for styling the slider animation is as follows:
.first-slide-enter{
opacity: 0;
transform: translatex(-100%);
transition: all 1.5s ease-out;
}
.first-slide-enter-to{
opacity: 1;
transform: translatex(0);
transition: all 1.5s ease-out;
}
.first-slide-leave-to{
opacity: 0;
transform: translatex(-100%);
transition: all 1.5s ease-out;
}
.second-slide-enter{
opacity: 0;
transform: translatex(0);
transition: all 1.5s ease-out;
}
.second-slide-enter-to{
opacity: 1;
transform: translatex(-100%);
transition: all 1.5s ease-out;
}
.second-slide-leave-to{
opacity: 0;
transform: translatex(0);
transition: all 1.5s ease-out;
}
Below is the HTML structure of my slider:
<transition name="first-slide">
<div v-if="!newShortcut.link">
<div id="drop-shortcut" class="drag-file clickable" @click="addShortcut">
<i class="fas fa-file-upload fa-lg"></i>
<p style="margin:20px 0 0;">Drag file here
<br> or click to browse</p>
</div>
<div>
<button @click="newShortcut.link = !newShortcut.link">Next</button>
</div>
</div>
</transition>
<transition name="second-slide">
<div v-if="newShortcut.link">
<div id="drop-icon" class="drag-file" @click="">
<i class="far fa-file-image fa-lg"></i>
<p style="margin:20px 0 0;">Drag file here
<br> or click to browse</p>
</div>
<div>
<button @click="newShortcut.link = !newShortcut.link">back</button>
</div>
</div>
</transition>
I am looking for assistance on resolving this issue and making the slider function as intended. Your help will be greatly appreciated!