可以通过覆盖框架的样式来实现, 通过改变translate3d(x,y,z)来实现不同方向的弹出.
若将100%-0 改为x轴,则是左边弹出.其他方向同理 .
@keyframes dialog-fade-in {
0% {
transform: translate3d(0,100% , 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes dialog-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(0, -100%, 0);
opacity: 0;
}
}