Javascript 过渡组件Vuejs-不工作-内部和外部之间的差异 编辑并简化问题

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

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

我尝试将转换置于内部组件加载：

父组件

加载.vue

加载
从“../Store.js”导入存储
导出默认值{
数据（）{
返回{
共享：Store.state，
}
},
}
.幻灯片淡入激活状态{
过渡：全部。3秒轻松；
}
.幻灯片淡入淡出激活状态{
过渡：所有.8s三次贝塞尔（1.0,0.5,0.8,1.0）；
}
.幻灯片淡入，.幻灯片淡入离开
/t>幻灯片渐变，对于作为激活，转换包组件允许在下列上下文中添加任何元素或组件的输入/离开转换：


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

从文档中：

当插入或删除封装在过渡构件中的图元时，会发生以下情况：


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

这就是为什么过渡只会工作，当它包装<代码> V-I/Eng>而不是在内部时，它是如何实现的。
 
作为过渡的实现，过渡包装组件允许您在以下上下文中添加任何元素或组件的进入/离开转换：

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

从文档中：

当插入或删除封装在过渡构件中的图元时，会发生以下情况：


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

这就是为什么转换只有在包装
v-if
时才起作用，而在内部时则不起作用，这就是它的实现方式。
那么您能否解释一下为什么这样的事情起作用：。v-if位于组件级别，转换位于组件内部。这正是我想说的redo@Leo我已经回答了这个问题，你错过了转换的name属性，请看fiddle：那么你能解释一下为什么这样的东西会起作用吗：。v-if位于组件级别，转换位于组件内部。这正是我想说的redo@Leo我已经回答了这个问题，您在过渡时错过了名称属性，请参见fiddle：
     <loading v-if="shared.loading"></loading>

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