Transition component Vuejs - Not working - Differences between inner and outer

Question

EDIT Simplify the question

http://jsfiddle.net/bf830qoq/

Why the transition in that minimalist example does not work? (It mimics the real case in my code)

Former post

I would like to apply a transition on a custom component in VueJs 2, depending on v-if condition.

I tried to put the transition inner the component loading :

Parent component

     <loading v-if="shared.loading"></loading>

Loading.vue

<template>
  <transition name="slide-fade">
        <div class="loading-container">
           <div class="container-no-text">
               <div class="title-no">Loading</div>
            </div>
        </div>
   </transition>
</template>


<script>
    import Store from '../store.js'
    export default{
        data () {
            return {
                shared: Store.state,
            }
        },
    }
</script>


<style>

    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for <2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
</style>

It simply does not work, the login disappears without any animation.

I tried to mimic the situation with JSFiddle :

• Outer transition : http://jsfiddle.net/0v0wyLv0/ WORKING

• Inner transition : http://jsfiddle.net/jpcays2b/ NOT WORKING

Here are the questions:

1. Why the second JSFiddle does not work (the inner one)?
2. Why on my code the "outer" does not work?
3. How can I make the loading component disappear smoothly?

Example which is working

https://jsfiddle.net/er3tjyh0/

Thank you

Answer 1

As par the implementation of transition in vue.js, transition wrapper component allows you to add entering/leaving transitions for any element or component in the following contexts:

• Conditional rendering (using v-if)
• Conditional display (using v-show)
• Dynamic components
• Component root nodes

From the docs:

When an element wrapped in a transition component is inserted or removed, this is what happens:

• Vue will automatically sniff whether the target element has CSS transitions or animations applied. If it does, CSS transition classes will be added/removed at appropriate timings.
• If the transition component provided JavaScript hooks, these hooks will be called at appropriate timings.
• If no CSS transitions/animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed immediately on next frame (Note: this is a browser animation frame, different from Vue’s concept of nextTick).

That's why transition will only work, when it is wrapping the v-if and not when it is inside, thats how it is implemented.