el-dialog修改出现的动画

毛三仙

已于 2023-03-17 11:31:29 修改

阅读量408

点赞数

分类专栏： css 文章标签： vue.js 前端 javascript Powered by 金山文档

于 2023-03-17 11:27:40 首次发布

本文链接：https://blog.csdn.net/m0_74149462/article/details/129615589

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

从右往左缓慢出现

<style lang="scss" scoped>
  /*.el-dialog__wrapper {*/
  /*  transition-duration: .3s !important;*/
  /*}*/

  /* 进入 */
  .dialog-fade-enter-active {
    animation: anim-open 1s !important;
  }

  /* 离开 */
  .dialog-fade-leave-active {
    animation: anim-close .3s !important;
  }

  @keyframes anim-open {
    0% {
      transform: translate3d(100%, 0, 0);
      opacity: 0;
    }

    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }

  @keyframes anim-close {
    0% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }

    100% {
      transform: translate3d(100%, 0, 0);
      opacity: 0;
    }
  }
</style>

中间慢慢的出现

<style lang="scss" scoped>
  /* 进入 */
  .dialog-fade-enter-active {
    animation: anim-open .8s !important;
  }

  /* 离开 */
  .dialog-fade-leave-active {
    animation: anim-close .3s !important;
  }

  @keyframes anim-open {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes anim-close {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }
</style>