ionic技术总结-$ionicModal自定义动画效果

如今在开发的项目 使用ionic框架写的，在开发过程当中，须要用特定动画效果显示模态框，我查看了官方文档：
 http://ionicframework.com/docs/api/service/$ionicModal/, 只提供了slide-in-up一个动画效果，没法知足需求。

而后我在https://forum.ionicframework.com/t/slide-in-right-animation-for-ionicmodal/18882找到了slide-right动画效果的代码，能够正常使用。

添加了slide-right的css，代码以下：

.slide-in-right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
.slide-in-right.ng-enter, .slide-in-right > .ng-enter {
  -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
  transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
}      
.slide-in-right.ng-enter-active, .slide-in-right > .ng-enter-active {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.slide-in-right.ng-leave, .slide-in-right > .ng-leave {
  -webkit-transition: all ease-in-out 250ms;
  transition: all ease-in-out 250ms;
}

可是这些也并没知足个人须要，改良后，个人代码：

.slide-in-right {
   -webkit-transform: translateX(-100%);
   transform: translateX(100%); 
}
.slide-in-right.ng-enter, .slide-in-right > .ng-enter {
  -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
   transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
}      
.slide-in-right.ng-enter-active, .slide-in-right > .ng-enter-active {
   -webkit-transform: translateX(0);
   transform: translateX(0); 
} 
.slide-in-right.ng-leave, .slide-in-right > .ng-leave {
  -webkit-transition: all ease-in-out 250ms;
   transition: all ease-in-out 250ms; 
}
.slide-in-left {
   -webkit-transform: translateX(-100%);
   transform: translateX(100%); 
}
.slide-in-left.ng-enter, .slide-in-left > .ng-enter {
  -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
   transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
}      
.slide-in-left.ng-enter-active, .slide-in-left > .ng-enter-active {
   -webkit-transform: translateX(0);
   transform: translateX(0); 
} 
.slide-in-left.ng-leave, .slide-in-left > .ng-leave {
  -webkit-transition: all ease-in-out 250ms;
   transition: all ease-in-out 250ms; 
}

最后实现了 向左滑动出现，和向右滑动出现：

http://runjs.cn/detail/6px8nqfm