过渡组件Vuejs - 不工作 - 内部和外部之间的差异

Question

编辑简化问题

http://jsfiddle.net/bf830qoq/

为什么这个极简主义的例子中的过渡不起作用？ （它模仿我代码中的真实案例）

以前的帖子

我想在VueJs 2中对自定义组件应用转换，具体取决于v-if条件。

我尝试将转换内部放入组件加载：

父组件

     <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>

它根本不起作用，登录消失而没有任何动画。

我试图用JSFiddle模仿这种情况：

• 外转：http://jsfiddle.net/0v0wyLv0/工作

• 内部过渡：http://jsfiddle.net/jpcays2b/不工作

以下是问题：

1. 为什么第二个JSFiddle不起作用（内部的）？
2. 为什么在我的代码中“外部”不起作用？
3. 如何使加载组件顺利消失？

正在运作的例子

https://jsfiddle.net/er3tjyh0/

谢谢

Answer 1

与vue.js中的转换实现相同，转换包装器组件允许您在以下上下文中为任何元素或组件添加进入/离开转换：

• 条件渲染（使用v-if）
• 条件显示（使用v-show）
• 动态组件
• 组件根节点

来自文档：

当插入或移除包含在过渡组件中的元素时，会发生以下情况：

• Vue会自动嗅探目标元素是否已应用CSS过渡或动画。如果是这样，将在适当的时间添加/删除CSS过渡类。
• 如果转换组件提供了JavaScript挂钩，则会在适当的时间调用这些挂钩。
• 如果没有检测到CSS过渡/动画并且没有提供JavaScript钩子，则插入和/或删除的DOM操作将在下一帧立即执行（注意：这是一个浏览器动画帧，不同于Vue的nextTick概念）。

这就是为什么转换只有在包裹v-if时才会起作用，而不是在它内部时，它就是如何实现的。