关于移动端过渡效果有点卡顿的问题

Question

有个需求就是，移动端页面刚打开就弹出一个交互框，用户点击关闭按钮就从中间向右下角缩放消失，显示另一个按钮，点击这个按钮就从右下角向中间从小到大过渡出交互框，

然后我就这么写了，用jquery控制添加删除类名

.animate-swt-in{transition-duration: .5s;transform: translate3d(calc(50% + 1rem),calc(50% - 0.95rem),0) scale(0);opacity: 0;}
.animate-swt-out{transition-duration: .5s;transform: translate3d(calc(50% - 3.75rem),calc(50% - 4.5rem),0) scale(1);opacity: 1;}

因为之前的前端写移动端页面的时候使用了calc css计算属性，所以我判断位置的时候也拿来用了，安卓运行的时候还是略微的有点掉帧，苹果也是有点这个要怎么进行优化呢，难道是calc的性能问题吗？