Help with vue transition

Hi everybody, I made a custom image slider with vue, I got it working alright but I can’t get the desired transition effect using vue’s enter/leave transitions, the effect I want is so the current slider stays in place and the entering slider slides into position over the old one, right now I got it only half working, the next slider snaps right into position instead, you can see it here:

This is the transition I’m using:

.slide-ftop-tbottom-enter { transform:translateY(-400px); }
.slide-ftop-tbottom-enter-active { transition: all 2s ease; }
.slide-ftop-tbottom-enter-to { transform:translateY(0px); }
.slide-ftop-tbottom-leave { opacity:1; }
.slide-ftop-tbottom-leave-active { transition: all 2s ease; }
.slide-ftop-tbottom-leave-to { opacity:1; }

And my slider component:

<template>
    <div class="SLIDERcontainer13_item_container">
        <transition-group name="slide-ftop-tbottom">
        <div class="SLIDERcontainer13_item_image" :style="'background-image:url('+item.thumbnail+');'" v-for="(item,index) in slideritems" :key="index+'I'" v-show="activeslider == index"></div>
        </transition-group>
    </div>
</template>
<!--SCRIPTS-->
<script>
import { mapState } from 'vuex';
import { chunk } from 'lodash';
export default {
name: 'SLIDERcontainer13',


props:
{
    sliderinterval: { default: 5000, type: Number },
    slideritems: { required:true },
    autoPlay: { default: true, type: Boolean }
},


data() {
    return {
        sliderTimer: 0,
        activeslider:0,
        isPlaying: false,
    }
},


mounted() {
    console.log(this.$options.name+' component successfully mounted');
    if (this.autoPlay) this.starTimer();
},


methods:{


    togglePlay() {
        if(this.isPlaying){
            this.stopTimer();
        }
        else{
            this.resetTimer();
        }
    },
    
    starTimer() {
        this.isPlaying = true;
        this.sliderTimer = setTimeout(() => {
            this.nextSlider();
        }, this.sliderinterval);
    },

    stopTimer() {
        this.isPlaying = false;
        clearTimeout(this.sliderTimer);
    },

    resetTimer() {
        clearTimeout(this.sliderTimer);
        this.starTimer();
    },

    goToSlider(sliderIndex) {
        if (this.isPlaying) this.resetTimer();
        this.activeslider = sliderIndex;
        console.log('changed active slider');
    },

    prevSlider() {
        if (this.activeslider === 0) return this.goToSlider(this.slideritems.length - 1);

        this.goToSlider(this.activeslider - 1);
    },

    nextSlider() {
        if (this.activeslider === this.slideritems.length - 1) return this.goToSlider(0);

        this.goToSlider(this.activeslider + 1)
    },

}


};
</script>
<!--STYLES-->
<style scoped>
.SLIDERcontainer13_item_container{width:33.33%; height:400px; position:relative; overflow:hidden;}
.SLIDERcontainer13_item_image{width:100%; height:100%; background-size:cover; background-position:center; position:absolute; top:0px; left:0px;}
@media only screen and (max-width: 736px) 
{
}
</style>

Your problem is likely to do with the order of your elements in the DOM. I’ve found it difficult to manage a slider using transition-group because you have to also manage the stacking order of your elements.

This kind of thing is hard to debug without a recreation of the issue because it depends on what’s happening in the DOM. If you can recreate it in a jsfiddle or codepen, that would be useful.

Personally I opt for using transition coupled with a dynamic component. IMO, this way is much easier to control the transition between slides and you can use the mode attribute which is what you’ll need for the effect you want to achieve.

Here’s a fiddle I drafted up for an article I’m going to write about it if you’d like to see this method. It will also prefetch the next/previous image depending on the direction the user is going.

https://jsfiddle.net/jamesbrndwgn/yjkL7r9t/1