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

Question

编辑简化问题

http://jsfiddle.net/bf830qoq/

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

以前的帖子

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

我试图把transition inside组件加载：

父组件

     <loading v-if="shared.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/ WORKING

• 内部转换：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 概念)。

这就是为什么transition只有在包裹v-if而不是在里面时才会起作用，这就是它的实现方式。