使用CSS3的 translate3d 演示来实现动画效果 w3school链接
更新:现在elementUI更新,出了drawer组件,支持从侧面划出,不用再自己写css了
控制100%和0的位置,可以控制从不同方向滑出 translate3d(x,y,z)
@keyframes dialog-fade-in {
0% {
transform: translate3d(100%, 0, 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(100%, 0, 0);
opacity: 0;
}
}