el-dialog从左到右的动画

代码

<style  lang="scss" scoped>
    .sidebar_container {
        .dialog_class{
            :deep(.el-dialog__wrapper){
                transition-duration: 0.3s;
            }

            :deep(.dialog-fade-enter-active){
                animation: none !important;
            }


            :deep(.dialog-fade-leave-active) {
                transition-duration: 0.15s !important;
                animation: none !important;
              }
              
              :deep(.dialog-fade-enter-active .el-dialog,
              .dialog-fade-leave-active .el-dialog) {
                animation-fill-mode: forwards;
              }
              
              :deep(.dialog-fade-enter-active .el-dialog) {
                animation-duration: 0.3s;
                animation-name: bounceInLeft;
                animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
              }
              
              :deep(.dialog-fade-leave-active .el-dialog) {
                animation-duration: 0.3s;
                animation-name: bounceInRight;
              }
        }
    }


@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  100% {
    transform: none;
  }
}

@keyframes bounceInRight {
  0% {
    transform: none;
  }
  60% {
    transform: translate3d(-5px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
}
</style>

效果