用了一个mask过渡动画，但是顶部fixed区域总是在动画结束前出现是什么原因？

Question

并不是专业做前端的，没办法用名词来说明现在遇到的这个问题，简单从下面的图来说就是动画还没有结束，但是顶部
fixed的区域提前显示出来了。

另外贴上部分相关代码吧

<!-- 页面过渡时通过子组件向上广播来控制mask过的的显示、隐藏 -->
<div id="mask">
     <t-mask :show="TMask.show" :message="TMask.message"></t-mask>
</div>

<!-- t-mask部分 -->
<template>
    <div v-show="show" class="animated" transition="fade">
        <div class="blog-mask"></div>
        <div class="blog-mask"
             style="background: rgba(0, 0, 0, 0);top: 45%;width: 100%;text-align: center;color: #FFFFFF;">
            <div class="loader-inner line-scale">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <span>{{message}}</span>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        replace: true,
        props: {
            show: {
                type: Boolean,
                default: false
            },
            message: {
                type: String,
                default: 'loading'
            }
        },
        transitions: {
            fade: {
                enterClass: '',
                leaveClass: 'fadeOut'
            }
        }
    };
</script>

头部区域的话就是直接拷贝了bootstrap的nav示例，只是添加了nav-fixed-topclass以及调整了z-index

---

补充下关闭和显示mask的代码

events: {
            SHOW_TRANSITION_MASK: function (message) {
                this.showTMask(message);
            },
            HIDE_TRANSITION_MASK: function () {
                setTimeout(()=> {
                    this.hideTMask();
                }, 500);
            }
        }
 // 子组件在compiled阶段dispatch HIDE_TRANSITION_MASK
 // 子组件在destory阶段SHOW_TRANSITION_MASK
 // 这里设置timeOut是因为不设置的话mask瞬间就结束了

---

补充blog-mask

.blog-mask {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #10AEFF;
}

---

自己调整了t-mask的dom结构，发现就好了，但还是想知道是什么原因造成的这种现象

<!-- 移动了blog-mask的位置 -->
<div v-show="show" class="blog-mask animated" transition="fade">
        <!-- <div class="blog-mask"></div> -->
        <div class="blog-mask"
             style="background: rgba(0, 0, 0, 0);top: 45%;width: 100%;text-align: center;color: #FFFFFF;">
            <div class="loader-inner line-scale">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <span>{{message}}</span>
        </div>
    </div>

Answer 1

如果按我的理解————代码自上而下渲染的话，那么将mask设置position（绝对、相对、固定），并让其z-index比nav的z-index大，或许能解决问题。

Answer 2

我看你问题有个 animate标签，我就说下 jq/zepto，的animate({},5000，function(){})吧,后面的参数是回调函数，你后面出现的页面的js写在 回调函数里面就可以了，就是是等前面{}里的动画完了，就执行哪个回调函数。

Answer 3

boostrap 的nav是fixed的
fixed的定位是最高級別的覆蓋
一般div預設是relative
我猜之前出現nav的關係
是你的blog-mask是繼承了boostrap 的fixed
也就多出了nav的位置

所以結構上來說
子層設定的是fixed
父層也是fixed的結構就會兩個都出現
只要在父層結構上設定relative或是包一層就解決這個問題了