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

Question

编辑简化问题

http://jsfiddle.net/bf830qoq/

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

以前的帖子

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

我试图将 transition inner 加载到组件中:

父组件

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

• 内部转换:http://jsfiddle.net/jpcays2b/不工作

问题如下:

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

有效的例子

https://jsfiddle.net/er3tjyh0/

谢谢

Answer 1

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

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

来自文档:

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

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

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