elementUI el-dialog从底部弹出的动画效果

可以通过覆盖框架的样式来实现, 通过改变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;
        }
    }