[2.0] Transition not working when nested in 2 <transition> wrapped routes?

[donnysim]

Vue.js version

2.0.0-rc.5

Reproduction Link

Could send the laravel project privately (because of theme files). Not exactly sure what the cause is to replicate in jsfiddle.

Steps to reproduce

Was just checking out Vue 2 and I stumbled upon a not working transition. My root app template is :

<template>
    <transition name="fade" mode="out-in">
        <router-view class="router-view"></router-view>
    </transition>
</template>

on enter, the router loads nested views:

{
    path: '/login', component: AuthPage,                    
    meta: { auth: { check: false, redirect: 'dashboard' } },
    children: [                                             
        { path: '', name: 'login', component: LoginForm }   
    ]                                                       
}

the AuthPage is a wrapper:

<template>
    <div class="wrapper wrapper-full-page">
        <div class="full-page login-page" data-color="red">
            <div class="content">
                <transition name="fade" mode="out-in">
                    <router-view class="router-view"></router-view>
                </transition>
            </div>
        </div>
    </div>
</template>

that load the LoginForm.

What is Expected?

a tag in LoginForm should animate when toggling the error value:

<form>
...
<transition name="expand">
    <div v-if="error" class="alert alert-danger">
        Invalid credentials.
    </div>
</transition>
...
</form>

What is actually happening?

The element just pops in and out, no expand-transition class is added, expand-enter and other classed are added and instantly removed, thus not showing any animation. If I manually add the classes by hand via dev tool, the element animates correctly.

[posva]

@donnysim Can you put that on a jsfiddle, please? Also try not to use vue-router in the example. Otherwise the issue belongs there

[fnlctrl]

The element just pops in and out, no expand-transition class is added

In 2.0 the transition system doesn't add static transitionname-transition class anymore, checkout the Transition System -> Transition CSS class changes section here: https://github.com/vuejs/vue/issues/2873

If I manually add the classes by hand via dev tool, the element animates correctly.

Yes, you can just add expand-transition to the element for a quick migration to 2.0, if you don't need different easing curves for enter and leave. But make sure to checkout the the issue above about transition system changes later.

<transition name="expand">
    <div v-if="error" class="alert alert-danger expand-transition">
        Invalid credentials.
    </div>
</transition>

Closing as OP does know a fix already, and as he stated, the problem is just that the transitionname-transition class is not added in 2.0 anymore.