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

最新推荐文章于 2021-06-02 15:25:06 发布

weixin_34185320

最新推荐文章于 2021-06-02 15:25:06 发布

阅读量325

点赞数

原文链接：https://my.oschina.net/dngsh/blog/625621

版权

为什么80%的码农都做不了架构师？>>>

现在在开发的项目使用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

转载于:https://my.oschina.net/dngsh/blog/625621