vue custom animation All In One

vue custom animation All In One

drawer-out animation 怎么定义的 ❓

Q: 全局搜索不到 ltr-drawer-in 定义出处，但是却能正常使用；

A: 显然是引入了第三方的全局样式 ✅

demo

<style lang="scss">
    .drawer-wrapper {
        position: absolute;
        top: 0;
        z-index: 551;
        height: 100%;
        background-color: #fff;
        box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 20px 2px rgba(0,0,0,.14), 0 6px 20px 5px rgba(0,0,0,.12);

        // 从左往右开
        &.ltr {
            animation: ltr-drawer-out 300ms cubic-bezier(0, 0, .2, 1) 0ms;
            left: 0;
        }
        &.drawer-opened.ltr {
            animation: ltr-drawer-in 300ms cubic-bezier(0, 0, .2, 1) 0ms;
        }

        // 从右往左开
        &.rtl {
            animation: rtl-drawer-out 300ms cubic-bezier(0, 0, .2, 1) 0ms;
            right: 0;
        }
        &.drawer-opened.rtl {
            animation: rtl-drawer-in 300ms cubic-bezier(0, 0, .2, 1) 0ms;
        }

        // 从上往下开
        &.ttb {
            animation: ttb-drawer-out 300ms cubic-bezier(0, 0, .2, 1) 0ms;
            left: 0;
        }
        &.drawer-opened.ttb {
            animation: ttb-drawer-in 300ms cubic-bezier(0, 0, .2, 1) 0ms;
        }

        // 从下往上开
        &.btt {
            animation: btt-drawer-out 300ms cubic-bezier(0, 0, .2, 1) 0ms;
            left: 0;
        }
        &.drawer-opened.btt {
            animation: btt-drawer-in 300ms cubic-bezier(0, 0, .2, 1) 0ms;
        }
    }
</style>

element-ui& scss

@mixin / $direction / @keyframes

    direction: {
      type: String,
      default: 'rtl',
      validator(val) {
        return ['ltr', 'rtl', 'ttb', 'btt'].indexOf(val) !== -1;
      }
    },

https://github.com/ElemeFE/element/blob/dev/packages/drawer/src/main.vue

@import "mixins/mixins";
@import "common/var";

@keyframes el-drawer-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@mixin drawer-animation($direction) {

  @keyframes #{$direction}-drawer-in {
    0% {

      @if $direction == ltr {
        transform: translate(-100%, 0px);
      }

      @if $direction == rtl {
        transform: translate(100%, 0px);
      }

      @if $direction == ttb {
        transform: translate(0px, -100%);
      }

      @if $direction == btt {
        transform: translate(0px, 100%);
      }
    }

    100% {
      @if $direction == ltr {
        transform: translate(0px, 0px);
      }

      @if $direction == rtl {
        transform: translate(0px, 0px);
      }

      @if $direction == ttb {
        transform: translate(0px, 0px);
      }

      @if $direction == btt {
        transform: translate(0px, 0px);
      }
    }
  }

  @keyframes #{$direction}-drawer-out {
    0% {
      @if $direction == ltr {
        transform: translate(0px, 0px);
      }

      @if $direction == rtl {
        transform: translate(0px, 0px);;
      }

      @if $direction == ttb {
        transform: translate(0px, 0px);
      }

      @if $direction == btt {
        transform: translate(0px, 0);
      }
    }

    100% {
      @if $direction == ltr {
        transform: translate(-100%, 0px);
      }

      @if $direction == rtl {
        transform: translate(100%, 0px);
      }

      @if $direction == ttb {
        transform: translate(0px, -100%);
      }

      @if $direction == btt {
        transform: translate(0px, 100%);
      }
    }
  }
}

@mixin animation-in($direction) {
  .el-drawer__open &.#{$direction} {
    animation: #{$direction}-drawer-in .3s 1ms;
  }
}

@mixin animation-out($direction) {
  &.#{$direction} {
    animation: #{$direction}-drawer-out .3s;
  }
}

@include drawer-animation(rtl);
@include drawer-animation(ltr);
@include drawer-animation(ttb);
@include drawer-animation(btt);

$directions: rtl, ltr, ttb, btt;

refs

https://juejin.cn/post/6915955723310481421

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 ️，侵权必究⚠️！

---