@mixin hover($name,$color) {
  animation: $name 300ms;
  animation-fill-mode: forwards;
  @keyframes #{$name} {
    0% {
      background-color: $color;
    }
    100% {
      background-color: lighten($color, 10);
    }
  }
}

@mixin angleAnimation() {
  input {
    & + span.suffix > i.icon-angle-down {
      transition: all ease .4s;
    }
    &:hover {
      cursor: pointer;
    }
    &:focus:not([readonly]) {
      border: 1px solid $primary;
      & + span.suffix > i.icon-angle-down {
        transform: rotate(-180deg);
      }
    }
    transition: all ease .4s;
  }
}

@mixin zoomInTop() {
  .zoom-in-top-enter-active, .zoom-in-top-leave-active {
    opacity: 1;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
    transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
    transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
    transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
    -webkit-transform-origin: center top;
    transform-origin: center top;
  }

  .zoom-in-top-enter, .zoom-in-top-leave-active {
    opacity: 0;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}

@mixin zoomInTopTransition() {
  // 为什么不写死在.yu-option中呢？因为写死了，就无法再更换动画
  // 以后，所有的默认动画，都叫transition

  // 初始化
  .transition {
    transform: scaleY(0);
    opacity: 0;
    transform-origin: center top;
    transition: transform .3s ease, opacity .3s ease;
    // 激活
    &.transition-enter{
      transform: scaleY(1);
      opacity: 1;
    }
    // 非激活
    &.transition-leave{
      transform: scaleY(0);
      opacity: 0;
    }
  }
}

@mixin fadeIn() {
  .fade-in-enter, .fade-in-leave-active, .fade-in-linear-enter, .fade-in-linear-leave, .fade-in-linear-leave-active, .fade-in-linear-enter, .fade-in-linear-leave, .fade-in-linear-leave-active {
    opacity: 0;
    transform: translateY(-100%);
  }

  .fade-in-enter-active, .fade-in-leave-active {
    -webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1);
    transition: all .3s cubic-bezier(.55, 0, .1, 1)
  }
}

@mixin messageFadeInTransition() {
  &.transition {
    opacity: 0;
    transform: translate(-$message-width/2, -100%);
    transition: transform .3s ease, opacity .3s ease;
    &.transition-enter {
      opacity: 1;
      transform: translate(-$message-width/2, $space-large);
    }
    &.transition-leave {
      opacity: 0;
      transform: translate(-$message-width/2, -100%);
    }
  }
}

@mixin fade() {
  .fade-enter, .fade-leave-active, .fade-linear-enter, .fade-linear-leave, .fade-linear-leave-active, .fade-linear-enter, .fade-linear-leave, .fade-linear-leave-active {
    opacity: 0;
  }

  .fade-enter-active, .fade-leave-active {
    -webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1);
    transition: all .3s cubic-bezier(.55, 0, .1, 1)
  }
}

@mixin zoomInCenter() {
  .zoom-in-center-enter-active,
  .zoom-in-center-leave-active {
    transition: all 0.3s cubic-bezier(.55, 0, .1, 1);
  }
  .zoom-in-center-enter,
  .zoom-in-center-leave-active {
    opacity: 0;
    transform: scale(0);
  }
}

@mixin zoomInTransition() {
  .transition {
    transform: scale(0);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
    // 激活
    &.transition-enter{
      transform: scale(1);
      opacity: 1;
    }
    // 非激活
    &.transition-leave{
      transform: scale(0);
      opacity: 0;
    }
  }
}