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;
        }
    }