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