angular-animate使用方法

1、下载angular-animate.min.js

2、创建angular模块的时候注入ngAnimate
3、angular-animate被注入到模块之后页面切换的过程中angular-animate会给要被移除的dom和要进入的dom添加ng-enter，ng-leave，ng-scope等样式

4、上述样式编写css动画代码

@keyframes slideOut{
  0%{
    transform:rotateX(0);
    transform:rotateY(0);
    transform:rotateZ(0);

  }
  100%{
    transform:rotateX(90deg) ;
    transform:rotateY(90deg);
    transform:rotateZ(90deg);

  }
}
@keyframes slideIn{
  0%{
    transform:rotateX(-90deg);
    transform:rotateY(-90deg);
    transform:rotateZ(-90deg);


  }
  100%{
    transform:rotateX(0) ;
    transform:rotateY(0);
    transform:rotateZ(0);

  }
}

.ng-enter{ animation: slideIn 0.5s both ease-in; z-index: 8888; transform-origin: 100% 100%  }
.ng-leave{ animation: slideOut 0.5s both ease-in; z-index: 9999; transform-origin: 0 0 }
.ng-scope{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;

}

这个是我的demo