@mixin transition($time) {
  will-change: transform;
  transition: all ease $time;
}

@mixin transform($type) {
  opacity: 0;
  transform: $type;
}

.se {
  &-fade-enter-active,
  &-fade-leave-active {
    @include transition(0.3s);
  }

  &-fade-enter-from,
  &-fade-leave-to {
    @include transform('');
  }

  &-fade-transform-enter-active,
  &-fade-transform-leave-active {
    @include transition(0.3s);
  }

  &-fade-transform-enter-from {
    @include transform(translateX(-30px));
  }

  &-fade-transform-leave-to {
    @include transform(translateX(30px));
  }

  &-slide-fade-enter-active,
  &-slide-fade-leave-active {
    @include transition(0.3s);
  }

  &-slide-fade-enter-from,
  &-slide-fade-leave-to {
    @include transform(translateX(30px));
  }

  &-slide-right-enter-active,
  &-slide-right-leave-active,
  &-slide-left-enter-active,
  &-slide-left-leave-active {
    @include transition(0.3s);
  }

  &-slide-right-enter-from,
  &-slide-left-leave-to {
    @include transform(translateX(-100%));
  }

  &-slide-left-enter-from,
  &-slide-right-leave-to {
    @include transform(translateX(100%));
  }
}