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

Question

编辑简化问题

为什么那个极简示例中的过渡不起作用？（它模仿了我代码中的真实情况）

前post

我想根据 v-if 条件在 VueJs 2 中的自定义组件上应用转换。

我尝试将 transition 放在 组件加载中：

父组件

     <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/不工作

问题如下：

为什么第二个 JSFiddle 不起作用（内部那个）？
为什么在我的代码中“外部”不起作用？
如何让加载组件平滑消失？

正在运行的示例

https://jsfiddle.net/er3tjyh0/

谢谢

Answer 1

作为 vue.js 中过渡的实现，过渡包装器组件允许您在以下上下文中为任何元素或组件添加 entering/leaving 过渡：

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

来自文档：

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

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

这就是为什么过渡只在包装 v-if 时有效，而不是在内部时有效，这就是它的实现方式。

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

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

javascript

css

transition

vuejs2

编辑简化问题

前post

父组件

Loading.vue

问题如下：

正在运行的示例