Question

在下面这个例子中

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

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

当我点击主页或关于按钮时，视图部分直接加载。但我需要从右向左移动当前页面（主页），新页面（约）应从右向左加载（过渡效果）

这怎么可能？

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);
            }

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

1 个答案: