Vue: problem with transition and v-show in list rendering

[intellild]

Vue.js version

2.1.10

Reproduction Link

https://github.com/ohmygod12121212/vue-bootstrap4

Steps to reproduce

clone the repo, npm install --dev
npm run watch and npm run dev at the same time
open 127.0.0.1:8080/dev.html
https://github.com/ohmygod12121212/vue-bootstrap4/blob/master/src/components/Carousel.vue
The leave animation not working, and if I comment the 'console.log' in line 96, the enter animation won't work, too.
If line 134 is removed, the animation won't appear as it should be.

What is Expected?

I am rewriting bootstrap 4 components in Vue, so the animation should work like http://v4-alpha.getbootstrap.com/components/carousel/

What is actually happening?

[posva]

Please, take the time to make a reproduction on a jsfiddle instead of sharing your whole project and also to narrow down the issue.
We'd appreciate that. Thank you 🙂

[intellild]

<template>
    <div>
        <transition-group 
            tag="div"
            :css="false"
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
            @before-leave="beforeLeave"
            @leave="leave"
            @after-leave="afterLeave">
            <span v-show="item === active" v-for="item in items" :key="item" class="transition">{{item}}</span>
        </transition-group>
        <button @click="toggle">toggle</button>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                items: [1, 2, 3, 4, 5],
                active: 1
            }
        },
        methods: {
            beforeEnter: function (el) {
                el.classList.add('before-enter');
            },
            enter: function (el) {
                el.classList.add('enter');
            },
            afterEnter: function(el) {
                el.classList.remove('before-enter');
            },
            beforeLeave: function(el) {
                //console.log(`before leave: ${getComputedStyle(el).display}`);
            },
            leave: function(el) {
                el.classList.add('leave');
                //console.log(`leave: ${getComputedStyle(el).display}`);
                console.log(el.classList);
            },
            afterLeave: function(el) {
                el.classList.remove('enter', 'leave');
            },
            toggle: function (el) {
                this.active += 1;
                if (this.active > 5) {
                    this.active = 1;
                }
            }
        }
    }
</script>

<style>
.transition {
    transition: all 1s linear;
    position: fixed;
    top: 0;
    display: block;
}
.before-enter {
    left: 10px;
}
.enter {
    left: 20px;
}
.enter.leave {
    left: 30px;
}
</style>

@posva
made an example
when leave, the span's class should be
"transition enter" -> "transition enter leave", here should be animations, but nothing happened and the span just disappear.

[posva]

You're not calling the done callback for enter nor leave: https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

[intellild]

@posva

When using JavaScript-only transitions, the done callbacks are required for the enter and leave hooks. Otherwise, they will be called synchronously and the transition will finish immediately.

// the done callback is optional when
// used in combination with CSS

obviously I'm using CSS transition

[posva]

Then remove :css="false". If you need further help, please head to the Forums and open a topic there so people can help you. Cheers!

[intellild]

@posva
Have you tested with your solutions? Neither make sense.

[yyx990803]

The done callback is required because although you are using CSS, you are adding the classes yourself via JavaScript.. It's not the same with "auto CSS transition" handled by Vue.