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

在下面的示例中

当我单击home或about按钮时，视图部件将直接加载。但是我需要将当前页面（主页）从右向左移动，新页面（关于）应该从右向左加载（过渡效果）

---

这怎么可能呢？

我已经通过使用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);
            }

---

您可以尝试css3动画，这样about页面的主体从右侧移入，home从左侧移出，或者您可以使用home和about的ng animatebody都是samewell，然后在每个页面的内容周围有两个不同的div，并将css转换应用到这些div url更改或单击Yes按钮，我可以放置两个div，正如您所说，我可以进行css转换。但问题是，当我单击home/about按钮时，两个div同时加载内容，然后发生转换。我不想将数据加载到当前显示页面。如果要在第二个div中加载数据，则应进行转换。如果我只有两个按钮，那么我可以管理两个视图名称。但是我有两个以上的按钮。如果你在pageload上同时加载这两个按钮，那么恐怕你需要使用javascript来完成这项工作，或者你可以尝试设置ng类，并在单击home或about时设置转换

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