通过UI路由器加载下一页时应用过渡效果

Question

在下面的例子中

http://plnkr.co/edit/IzimSVsstarlFviAm7S7?p =

预览

<div class="container">
<div ui-view></div>

当我点击home或about按钮时，视图部分直接加载。但是我需要将当前页面(home)从右向左移动，新页面(about)应该从右向左加载(过渡效果)

这怎么可能?

Answer 1

我已经通过使用ng-animate，添加下面的css到我的代码

[data-ui-view].ng-enter, [data-ui-view].ng-leave {
              position: absolute;
              left: 0;
              right: 0;
              -webkit-transition:all .5s ease-in-out;
                -moz-transition:all .5s ease-in-out;
                -o-transition:all .5s ease-in-out;
                transition:all .5s ease-in-out;
            }
            [data-ui-view].ng-enter {
              opacity: 0;
             -webkit-transform:translate(960px);
              -moz-transform:translate(960px);
              transform:translate(960px);
            }
            [data-ui-view].ng-enter-active {
              opacity: 1;
             -webkit-transform:translate(0px);
              -moz-transform:translate(0px);
              transform:translate(0px);
            }
            [data-ui-view].ng-leave {
              opacity: 1;
              /*padding-left: 0px;*/  
               -webkit-transform:translate(0px);
              -moz-transform:translate(0px);
              transform:translate(0px);
            }
            [data-ui-view].ng-leave-active {
              opacity: 0;
              /*padding-left: 100px;*/
              -webkit-transform:translate(-960px);
              -moz-transform:translate(-960px);
              transform:translate(-960px);
            }