使用angular1.x的ui router,页面刷新闪动的问题？

Question

    <div header>头部</div>
    <div ui-view></div>
    <div footer>底部</div>

每次刷新页面，ui-view页面获取的很慢，导致页面会白屏或者底部闪动一下，有什么好的解决办法吗？谢谢了!!

Answer 1

或许能帮的到您http://www.jb51.net/article/8...

Answer 2

一般的做法是，先隐藏整个数据依赖的区域，然后用ng-if来判断，异步数据的data是否回调过来了。如果是的话，则显示并渲染。没有的话，可以先给个loading占位。

Answer 3

• 这里可以给ui-view增加一些静态的样式，比如高度啦，边框啦之类的

• 之后再通过ng-animate的语法给ui-view增加一些动画样式，比如

// sass

.ui-view-container {
    position: relative;
    height: 100%;
    width: 100%;
    &.full {
        height: 100vh;
        width: 100vw;
    }
}

[ui-view].ng-enter,
[ui-view].ng-leave {
    transition: all .5s ease-in-out;
}

[ui-view].ng-enter {
    opacity: 0;
    &.ng-enter-active {
        opacity: 1;
    }
}

[ui-view].ng-leave {
    opacity: 1;
    &.ng-leave-active {
        opacity: 0;
    }
}

前提是你得加载 ng-animate 模块，这样ng-leave和ng-enter这些css hook才会生效。